Related
I want to plot my historgram bar with different colors for A, B, C but I have my 3 bars with the same color i.e black, I guess it's in the fill field issue. If I plot only one bar then it's printed wirth the right color, but when it's more than 1 then it's all black.
I'm using recharts
Any idea please ?
export default function Overview() {
const { ratingBar } = graphs ?? {}
const COLORS = {
'A': 'red',
'B': 'green',
'C': 'orange',
}
function ratingGraph() {
const data = ratingBar
return ({
graph: {
type: 'bar',
showTooltip: true,
showXAxis: true,
showYAxis: true,
showLegend: true,
container: {
data,
},
bars: [
{
dataKey: 'count',
fill: COLORS[data.map((m) => m.title)],
}
],
xaxis: {
dataKey: 'title',
tick: { style: { fontSize: '.9rem' } },
},
yaxis: {
dataKey: 'count',
domain: [0, 100],
},
},
}).graph
}
return (
<div >
{...ratingGraph()}
</div>
)
}
Here is my data from my api :
{
"ratingBar": [
{
"title": "A",
"count": 2
},
{
"title": "B",
"count": 48
},
{
"title": "C",
"count": 78
}
]
}
you have to use cells property :
cells: data.map(m => ({fill: COLORS[m.title]}))
fill: data.map(m => COLORS[m.title])
Yours map is wrong. I guess the fill expects an array of colors. But you are accessing COLORS key with a mapped array which will be always undefined.
I am attempting to change link colors in my GoJS tree depending on a key / value pair in my model data (color, in this case). I am attempting to call my method to change the link color by doing the following:
myDiagram.linkTemplate =
$(go.Link,
{ routing: go.Link.Orthogonal, corner: 5, toShortLength: -2, fromShortLength: -2 },
$(go.Shape, { strokeWidth: 2, stroke: colors["gray"] },
new go.Binding("geometry", "color", setLinkColor))); // the link shape and color
However, my setLinkColor method is never called. Here it is for reference:
function setLinkColor(color) {
console.log("value of color: ", color);
switch(color) {
case "critical":
link = go.Shape.stroke(colors["orange"]);
break;
default:
link = go.Shape.stroke(colors["white"]);
}
return link;
}
How can I conditionally color my Links depending on the value of color?
UPDATE
I have tried implementing Walter's suggestion as follows:
var linkColors = {true: colors["orange"], false: colors["white"]};
myDiagram.linkTemplate =
$(go.Link,
$(go.Shape, { strokeWidth: 2 },
new go.Binding("stroke", "critical", function(c) { return linkColors[c] || colors["orange"]; })),
$(go.Shape, { toArrow: "OpenTriangle", strokeWidth: 2 },
new go.Binding("stroke", "critical", function(c) { return linkColors[c] || colors["orange"]; })),
myDiagram.model = new go.GraphLinksModel(
[
{ key: 2, geo: "thing1", color: colors["white"], critical: false },
{ key: 3, geo: "thing2", color: "#F47321", critical: true },
{ key: 4, geo: "thing3", color: colors["white"], critical: false },
{ key: 5, geo: "thing4", color: colors["white"], critical: false },
However this still is not coloring the links, what am I doing wrong?
function init() {
var $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, "myDiagramDiv",
{ "undoManager.isEnabled": true });
myDiagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, { fill: "white", portId: "" },
new go.Binding("fill", "color")),
$(go.TextBlock, { margin: 8 },
new go.Binding("text"))
);
var myColors = { "A": "red", "B": "green", "C": "blue" };
myDiagram.linkTemplate =
$(go.Link,
$(go.Shape, { strokeWidth: 2 },
new go.Binding("stroke", "color", function(c) { return myColors[c] || "blue"; })),
$(go.Shape, { toArrow: "OpenTriangle", strokeWidth: 2 },
new go.Binding("stroke", "color", function(c) { return myColors[c] || "blue"; }))
);
myDiagram.model = new go.GraphLinksModel(
[
{ key: 1, text: "Alpha", color: "lightblue" },
{ key: 2, text: "Beta", color: "orange" },
{ key: 3, text: "Gamma", color: "lightgreen" },
{ key: 4, text: "Delta", color: "pink" }
],
[
{ from: 1, to: 2, color: "A" },
{ from: 1, to: 3, color: "B" },
{ from: 2, to: 2 },
{ from: 3, to: 4, color: "C" },
{ from: 4, to: 1, color: "D" }
]);
}
function test() {
myDiagram.model.commit(function(m) {
m.set(m.linkDataArray[0], "color", "B");
});
}
The link template shows one way of binding the link path's stroke color to the value of the link's data.color property lookup of a CSS color in the myColors object.
The test function shows one way of modifying the color of the first link. More discussion is at https://gojs.net/latest/learn/graphObject.html
I have created two square shapes and connect them with links by their ports. But when I create more than two links, their link labels starting overlap (You can see this in screenshot below).
Is GoJS has some options to correctly align or separate labels?
I think the problem might be that you are using multiple ports. Assuming the ports are positioned along a side of a node, there isn't much choice for where links could connect with the node.
Instead, the default behavior for a node with a single port might be what you are looking for:
function init() {
var $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, "myDiagramDiv");
myDiagram.nodeTemplate =
$(go.Node, "Auto",
new go.Binding("location"),
$(go.Shape,
{ fill: "white", portId: "" },
new go.Binding("fill", "color")),
$(go.TextBlock,
{ margin: 8 },
new go.Binding("text"))
);
myDiagram.linkTemplate =
$(go.Link,
//{ curve: go.Link.Bezier },
$(go.Shape),
$(go.Shape, { toArrow: "OpenTriangle" }),
$(go.TextBlock, { background: "white" },
new go.Binding("text"))
);
myDiagram.model = new go.GraphLinksModel(
[
{ key: 1, text: "Alpha", color: "lightblue", location: new go.Point(0, 0) },
{ key: 2, text: "Beta", color: "orange", location: new go.Point(200, 50) },
{ key: 3, text: "Gamma", color: "lightgreen", location: new go.Point(50, 200) }
],
[
{ from: 1, to: 2, text: "12" },
{ from: 1, to: 2, text: "a long label" },
{ from: 2, to: 1, text: "345" },
{ from: 1, to: 3, text: "13" },
{ from: 1, to: 3, text: "short" },
{ from: 3, to: 1, text: "34567890" }
]);
}
produces:
Or if you specify Bezier curve links:
Move the nodes around and you can see how the distance between the links changes based on the breadth of the link labels, since the labels are not circular.
Is it possible in jqxGrid to render cell values that are objects?
E.g. In this Codepen example each row has an attribute details which has an object value. I'd like to say, make a custom renderer that displays the JSON stringified version of it, and a custom editor to modify it.
The challenge is that the row values appear as the string "[Object object]":
var rows = [
{ color: "red", details: { a: 1, b: 2 } },
{ color: "green", details: { a: 2, b: 4 } },
{ color: "blue", details: { a: 3, b: 8 } },
{ color: "yellow", details: { a: 4, b: 16 } }
];
I tried creating a cell renderer, but the argument value is already squashed to the string "[Object object]" when the function is called. Do I need to do something with the data adaptor to get the object value?
var cellsrenderer = function(row, column, value) {
console.log(value);
return "<div>" + JSON.stringify(value) + "</div>";
};
var columns = [
{
text: "Color",
datafield: "color",
width: 100
},
{
text: "Details",
datafield: "details",
width: 200,
cellsrenderer: cellsrenderer
}
];
var source = {
localdata: rows,
datatype: "array"
};
var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function(data) {},
loadError: function(xhr, status, error) {}
});
$("#grid").jqxGrid({
height: 600,
width: 600,
source: dataAdapter,
pageable: true,
pagesize: 20,
autoheight: true,
columns: columns
});
try this
var rows = [
{ color: "red", details: [{ a: 1, b: 2 }] },
{ color: "green", details: [{ a: 2, b: 4 }] },
{ color: "blue", details: [{ a: 3, b: 8 }] },
{ color: "yellow", details: [{ a: 4, b: 16 }] }
];
I am trying to increase the header size on a pdf using pdfmake.
Currently am able to get a header on both the left and right of the page, which is what I want, but when the height passes 26, the image disappears because there is a limited amount of space for the header.
The margin can be decreased to increase the size but i want the
margin to remain.
I've searched pdfMake github for similar issues with no success.
If you need to test anything, try the code I have so far on
pdfmake playground
Keep in mind you will need to copy and paste all this code on the "playground" to make it work.
var dd = {
pageSize: 'LEGAL',
pageOrientation: 'landscape',
header: {
margin: 8,
columns: [{
table: {
widths: ['50%', '50%'],
body: [
[{
image: 'sampleImage.jpg',
width: 80,
height: 26,
}, {
image: 'sampleImage.jpg',
width: 80,
height: 26,
alignment: 'right'
}]
]
},
layout: 'noBorders'
}]
},
content: [
'First paragraph',
'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines'
]
}
You need to add a pageMargins and adjust the second parameter (top margin) to your total header size. You can try values until you get all header content visible.
For example:
In this case, I use 80 (pageMargin: [40,80,40,60]) to get the image with height 60
var dd = {
pageSize: 'LEGAL',
pageOrientation: 'landscape',
pageMargins: [40, 80, 40, 60],
header: {
margin: 8,
columns: [
{
table: {
widths: [ '50%','50%'],
body: [
[
{ image: 'sampleImage.jpg',
width: 80, height: 60,
},
{ image: 'sampleImage.jpg',
width: 80, height: 60,
alignment:'right'}
]
]
},
layout: 'noBorders'
}
]
},
content: [
'First paragraph',
'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines'
]
}
The accepted answer for this is a good one, but I thought since I found one I believe might work better for others, especially if header content length may vary, I would share.
Tables in pdfmake have a nifty feature where the header row(s) are repeated on each page the table spans. So, you can create a table that wraps your entire document, and add as many header rows as you would like, and they will be sticky throughout all pages. Here's an example doc def.
var docDefinition = {
pageSize : 'LETTER',
pageMargins : [25, 25, 25, 35],
defaultStyle : {
fontSize : 12,
columnGap : 20
},
// Page Layout
content : {
// This table will contain ALL content
table : {
// Defining the top 2 rows as the "sticky" header rows
headerRows: 2,
// One column, full width
widths: ['*'],
body: [
// Header Row One
// An array with just one "cell"
[
// Just because I only have one cell, doesn't mean I can't have
// multiple columns!
{
columns : [
{
width : '*',
text : 'Delivery Company, Inc.',
fontSize : 12,
bold : true
},
{
width : '*',
text : [
{ text: 'Delivery Slip\n', fontSize: 12 },
{ text: 'Date ', bold: true },
'2/16/2015 ',
{ text: 'Arrived ', bold: true },
'11:05 AM ',
{ text: 'Left ', bold: true },
'11:21 AM'
],
fontSize : 10,
alignment : 'right'
}
]
}
],
// Second Header Row
[
{
columns: [
{
width: 'auto',
margin: [0,0,10,0],
text: [
{ text: 'CUSTOMER\n', fontSize: 8, bold: true, color: '#bbbbbb' },
{ text: 'John Doe', fontSize: 12 }
]
},
{
width: 'auto',
margin: [0,0,10,0],
text: [
{ text: 'INVOICE #\n', fontSize: 8, bold: true, color: '#bbbbbb' },
{ text: '123456', fontSize: 12 }
]
}
]
}
],
// Now you can break your content out into the remaining rows.
// Or you could have one row with one cell that contains
// all of your content
// Content Row(s)
[{
fontSize: 10,
stack: [
// Content
{ text:'this is content', pageBreak: 'after' },
{ text:'this is more content', pageBreak: 'after' },
{ text:'this is third page content' }
]
}],
[{
fontSize: 10,
stack: [
// Content
{ text:'this is content', pageBreak: 'after' },
{ text:'this is more content', pageBreak: 'after' },
{ text:'this is third page content' }
]
}]
]
},
// Table Styles
layout: {
hLineWidth: function(i, node) { return (i === 1 || i === 2) ? 1 : 0; },
vLineWidth: function(i, node) { return 0; },
hLineColor: function(i, node) { return (i === 1 || i === 2) ? '#eeeeee' : 'white'; },
vLineColor: function(i, node) { return 'white' },
paddingBottom: function(i, node) {
switch (i) {
case 0:
return 5;
case 1:
return 2;
default:
return 0;
}
},
paddingTop: function(i, node) {
switch (i) {
case 0:
return 0;
case 1:
return 2;
default:
return 10;
}
}
}
},
// Page Footer
footer : function(currentPage, pageCount) {
return {
alignment : 'center',
text : currentPage.toString() + ' of ' + pageCount,
fontSize : 8
}
},
};