I'm using Victory Tooltips inside a Victory PieChart. The tooltip text (actually label) is quite huge.
I'm unable to break the text in an automatic manner and so the width of the tooltip overflows the container and I can't see the whole text. How do I add a max-width to the tooltip? Is it possible to break the text to multiple lines?
<VictoryPie
colorScale = { colors } // Some colors
responsive = { true }
data = { data } // Some data
innerRadius = { 100 }
labelRadius = { 100 }
labelComponent = {
<VictoryTooltip
orientation = "top"
cornerRadius = { 8 }
flyoutStyle = {{ fill: "#151515", stroke : '#313131' }}
pointerOrientation = "bottom"
flyoutPadding = { 20 }
text = { (data) => `top \n ${data.datum?.label}` }
style = { [
{fill : 'orange', stroke : 'blue', strokeWidth : '0.1%', fontSize : '20px'},
{fill : 'green', stroke : 'red', fontSize : '14px', dy : '20'}
] }
/>
}
/>
It shows up like so
How do I show the text in a smaller container?
The only way I found was to add a line break ${'\n'} or creating a CustomFlyout using svg (its on the Victory page docs) https://formidable.com/open-source/victory/guides/tooltips/#tooltips-with-victoryvoronoicontainer
Related
I want to change the color of label when dropdown is shown and return the color of label to normal when dropdown hides. How can I do it with binding?
so there will be a property
property: {
icon: {
check: Boolean,
apply: handleVisibility
}
}
this.handleVisibility = function(value) {}
this.bind()?
my code
var label = new qx.ui.basic.Label("Default");
label.setFont("bold");
this.getRoot().add(label, {
left: 20,
top: 20,
});
// create a combo box
var comboBox = new qx.ui.form.ComboBox();
// fill the combo box with some stuff
for (var i = 1; i < 31; i++) {
var tempItem = new qx.ui.form.ListItem(
"2^ " + i + " = " + Math.pow(2, i)
);
comboBox.add(tempItem);
}
// add the combobox to the documents root
this.getRoot().add(comboBox, {
left: 20,
top: 40,
});
I've appended about 20 lines to your code, here, to show how you might do it. You can plug this into https://playground.qooxdoo.org to test it.
var label = new qx.ui.basic.Label("Default");
label.setFont("bold");
this.getRoot().add(label, {
left: 20,
top: 20,
});
// create a combo box
var comboBox = new qx.ui.form.ComboBox();
// fill the combo box with some stuff
for (var i = 1; i < 31; i++) {
var tempItem = new qx.ui.form.ListItem(
"2^ " + i + " = " + Math.pow(2, i)
);
comboBox.add(tempItem);
}
// add the combobox to the documents root
this.getRoot().add(comboBox, {
left: 20,
top: 40,
});
// Get easy access to the textfield of the comboBox and its popup list
let textfield = comboBox.getChildControl("textfield");
let popup = comboBox.getChildControl("popup");
// When the popup's `visibility` property changes, modify the textfield's
// `backgroundColor` property. The value of the `visibility` property will be
// "hidden" or "visible". We use a `converter`, to convert the value
// from one of those, to the color to be used. (A color of `null`, used in
// this example when the popup is hidden, means use the default color.)
popup.bind(
"visibility",
textfield,
"backgroundColor",
{
converter : function(data, model, source, target)
{
return data == "visible" ? "cyan" : null;
}
});
I am building a project using React with a doughnut and bar chart. Working with Chart.js 3.xx.
I am trying to make my custom legend functional. I want to make data fractions disappear when the user clicks my legend items - like in the native legend, and optimally also remove the data and make the chart present it's updated data after removal.
I also use data labels to present percentage of the data on the fractions.
import ChartDataLabels from 'chartjs-plugin-datalabels';
I came across this topic: ChartJS - Show/hide data individually instead of entire dataset on bar/line charts
and used this suggested code there:
function chartOnClick(evt) {
let chart = evt.chart
const points = chart.getElementsAtEventForMode(evt, 'nearest', {}, true);
if (points.length) {
const firstPoint = points[0];
//var label = myChart.data.labels[firstPoint.index];
//var value = myChart.data.datasets[firstPoint.datasetIndex].data[firstPoint.index];
let datasetIndex = firstPoint.datasetIndex, index = firstPoint.index;
if (firstPoint.element.hidden != true) {
chart.hide(datasetIndex, index);
} else {
chart.show(datasetIndex, index);
}
}
}
options: { // chart options
onClick: chartOnClick
}
It almost works, but the hide() method doesn't remove the fraction's percentage data label when activated, whereas when clicking the native legend it does remove it entirely.
I tried looking in the plugin's docs but didn't manage to find how to remove a single label.
How can I achieve what I am looking for?
EDIT:
Options Object:
export const doughnutOptsObj = {
onClick: chartOnClick,
responsive: true,
maintainAspectRatio: false,
layout: { padding: { top: 16, bottom: 16 } },
hoverOffset: 32,
plugins: {
legend: {
display: true,
position: 'bottom',
},
datalabels: {
formatter: (value, dnct1) => {
let sum = 0;
let dataArr = dnct1.chart.data.datasets[0].data;
dataArr.map((data) => {
sum += Number(data);
});
let percentage = ((value * 100) / sum).toFixed() + '%';
return percentage;
},
color: ['#fbfcfd'],
font: { weight: 'bold' },
// display: false, <-- this works and makes all of the data labels disappear
},
},
};
It seems that the onClick function is working properly.
I have tried the attached code, leveraging on toggleDataVisibility API, and it's working as requested (codepen: https://codepen.io/stockinail/pen/abKNJqJ):
function chartOnClick(evt) {
let chart = evt.chart
const points = chart.getElementsAtEventForMode(evt, 'nearest', {}, true);
if (points.length) {
const firstPoint = points[0];
chart.toggleDataVisibility(firstPoint.index);
chart.update();
}
}
TL;DR: In #react-google-maps/api, I want to be able to make dynamic cluster icons/symbol in the style of pie charts, based on the markers in the cluster, but it seems I can only make icons from a static array, and cannot pass the the markers as parameters.
Full Description:
I am using typescript react with the package #react-google-maps/api, and I'm trying to find a way with the ClustererComponent/MarkerClusterer to take a callback or similar in order to be able to be able to create an svg for each cluster based on the markers in the given cluster.
The current issue is that the way I understand it, I am limited to a static array of urls to icons, and thought I can make an svg in those, I have no way to pass parameters into those svgs, as the only way the package allows me to chose a style is thought index in the style array.
I have read thought the following material, but have not been able to get find a way to make an icon dynamically based on the markers:
Documentation for #react-google-maps/api: https://react-google-maps-api-docs.netlify.app/#markerclustere
Documentation for google maps markerclusterer: https://developers.google.com/maps/documentation/javascript/marker-clustering
I have found libraries like this: https://github.com/hassanlatif/google-map-chart-marker-clusterer, that should be able to be used as a solution, but they don't seem to work with the #react-google-maps/api, only with earlier versions of google map. If this is not the case, and these can be used directly, then I would be more then happy with an answer describing how to use libraries like the one above with #react-google-maps/api, as that should allow be to make clusters in the same way as the picture below.
EDIT: as I got reminded in the comments, here is the code I have so far:
What I've tried: I have tried to find any way to set in an svg element instead of a url, but have since just decided to make a url with the svg data, as shown below. I have tried to edit the url of the clusters under the MarkerClusterer thought the callback for onClusteringBegin, onClusteringEnd and onLoad, but so far, no luck.
How I make the svg into url-data, so it can be used for img src
/*
* Pie Chart SVG Icon in URL form
*
* Inspiration taken from: https://medium.com/hackernoon/a-simple-pie-chart-in-svg-dbdd653b6936
*
* Note: As of right now, I am identifying the difference in marker types by setting the type-number I use in the title of the marker
*/
const serializeXmlNode = (xmlNode: any) => {
if (typeof window.XMLSerializer != "undefined") {
return (new window.XMLSerializer()).serializeToString(xmlNode);
} else if (typeof xmlNode.xml != "undefined") {
return xmlNode.xml;
}
return "";
}
function getCoordinatesForPercent(percent: number) {
const x = Math.cos(2 * Math.PI * percent);
const y = Math.sin(2 * Math.PI * percent);
return [x, y];
}
const makePieChartIcon = (slices: any[]) => {
const svgNS = 'http://www.w3.org/2000/svg';
var svg = document.createElementNS(svgNS, 'svg')
svg.setAttribute('viewBox', '-1.1 -1.1 2.2 2.2')
svg.setAttribute('style', 'transform: rotate(-90deg)')
svg.setAttribute('height', '60')
var circle = document.createElementNS(svgNS, 'circle')
circle.setAttribute('r', '1.1')
circle.setAttribute('fill', 'white')
svg.appendChild(circle);
let cumulativePercent = 0;
slices.map((slice: any) => {
const [startX, startY] = getCoordinatesForPercent(cumulativePercent);
cumulativePercent += slice.percent;
const [endX, endY] = getCoordinatesForPercent(cumulativePercent);
const largeArcFlag = slice.percent > .5 ? 1 : 0;
const pathData = [
`M ${startX} ${startY}`, // Move
`A 1 1 0 ${largeArcFlag} 1 ${endX} ${endY}`, // Arc
`L 0 0`, // Line
].join(' ');
const path = document.createElementNS(svgNS, 'path');
path.setAttribute('d', pathData);
path.setAttribute('fill', slice.color);
svg.appendChild(path);
})
var svgUrl = 'data:image/svg+xml;charset=UTF-8,' + serializeXmlNode(svg)
return svgUrl
}
const makeDynamicClusterIcon = (markers: any[]) => {
var numMarkers = markers.length;
var slices = markers.reduce((acc: any, marker: any) => {
acc[parseInt(marker.title)].percent += 1 / numMarkers;
return acc;
}, [
{ percent: 0, color: 'Green' },
{ percent: 0, color: 'Blue' },
{ percent: 0, color: 'Red' },
])
var newIconURL = makePieChartIcon(slices)
return newIconURL;
}
How I use the MarkerClusterer Component
<MarkerClusterer
options={{
averageCenter: true,
styles: clusterStyles,
}}
>
{(clusterer) =>
markerData.map((marker: any) => (
<Marker
key={marker.key}
title={String(marker.type)}
position={{ lat: marker.lat, lng: marker.lng }}
clusterer={clusterer}
/>
))
}
</MarkerClusterer>
Right now, I can only use some static styles, but I have them as the following for testing:
const clusterStyles = [
{
height: 50, textColor: '#ffffff', width: 50,
url: 'data:image/svg+xml;charset=UTF-8,%3Csvg xmlns="http://www.w3.org/2000/svg" height="50" width="100"%3E%3Ccircle cx="25" cy="25" r="20" stroke="black" stroke-width="3" fill="green" /%3E%3C/svg%3E',
},
{
height: 50, textColor: '#ffffff', width: 50,
url: 'data:image/svg+xml;charset=UTF-8,%3Csvg xmlns="http://www.w3.org/2000/svg" height="50" width="100"%3E%3Ccircle cx="25" cy="25" r="20" stroke="black" stroke-width="3" fill="red" /%3E%3C/svg%3E',
}
];
I found a solution, by finding out that the style array for each cluster (ClusterStyles) can be changed, and then I have change it with the data from the specific markers in the given cluster. I ended up doing this in the callback onClusteringEnd, as here:
{/* Added to the MarkerClusterer */}
onClusteringEnd={(clusterer) => {
clusterer.clusters.map((cluster) => {
cluster.clusterIcon.styles = makeDynamicClusterIcon(cluster.markers)
})
}}
And I changed the last line with return of the makeDynamicClusterIcon function I showed above to instead say:
return [{ url: newIconURL, height: 60, width: 60, textColor: '#FFFFFF', textSize: 22 }];
I'm using JointJS in a React environment to create a Directed graph from some Neo4j data. My problem is that elements are being generated off the paper As pictured here, "test6" is generated mostly off the page and "test10" isn't even shown. I would like all elements to be displayed on the paper, without overlapping each other or links if possible.
My paper is defined with only a width dimension set equal to the div width and the div is styled to be 100% width
...
width: $('#paper').width(),
...
and
render(){
return(
<React.Fragment>
<div id="paper" style={{width:'100%'}}></div>
</React.Fragment>
)
}
The code for generating an element is as follows:
function makeElement(node) {
var maxLineLength = _.max(node.name.split('\n'), function(l) { return l.length; }).length;
var letterSize = 12;
var width = 2 * (letterSize * (0.6 * maxLineLength + 1));
var height = 2 * ((node.name.split('\n').length + 1) * letterSize);
return new joint.shapes.basic.Rect({
id: node.id,
size: { width: 100, height: height },
attrs: {
type:'node',
text: {
text: node.name,
'font-size': letterSize,
'font-family': 'monospace' },
rect: {
width: width, height: height,
rx: 5, ry: 5,
stroke: '#555'
}
}
});
}
Thanks in advance :)
EDIT: I don't have the exact solution yet, but in the meantime I used this to make the paper draggable to view all nodes
I am referring this example to export a worksheet https://github.com/SheetJS/js-xlsx/issues/817. How to do cell
styling like background coloring,font size and increasing the width of the
cells to make the data fit exactly.I have gone through the documentation but couldn't find any proper examples to use fill etc.Is there a way to do the formatting?
Below is the code snippet:
/* make the worksheet */
var ws = XLSX.utils.json_to_sheet(data);
/* add to workbook */
var wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "People");
/* write workbook (use type 'binary') */
var wbout = XLSX.write(wb, {bookType:'xlsx', type:'binary'});
/* generate a download */
function s2ab(s) {
var buf = new ArrayBuffer(s.length);
var view = new Uint8Array(buf);
for (var i=0; i!=s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
}
saveAs(new Blob([s2ab(wbout)],{type:"application/octet-
stream"}),"sheetjs.xlsx");
Styling is only available in Pro Version of SheetJS. But I think you are using community version(free version). In Community version styling is not available.
You can check here official information:
We also offer a pro version with performance enhancements, additional
features like styling, and dedicated support.
There are a bunch of community forks that allow styling. My personal favorite is xlsx-js-style. It is up to date and works well compared to other libraries.
sheetjs-style is also up to date, but i had some problems with it. See: Styles not working
xlsx-style is not up to date. Currently 397 commits behind SheetJS:master. I would not use it if possible.
All of these libraries share the same styling options. Here is a bunch of examples:
for (i in ws) {
if (typeof(ws[i]) != "object") continue;
let cell = XLSX.utils.decode_cell(i);
ws[i].s = { // styling for all cells
font: {
name: "arial"
},
alignment: {
vertical: "center",
horizontal: "center",
wrapText: '1', // any truthy value here
},
border: {
right: {
style: "thin",
color: "000000"
},
left: {
style: "thin",
color: "000000"
},
}
};
if (cell.c == 0) { // first column
ws[i].s.numFmt = "DD/MM/YYYY HH:MM"; // for dates
ws[i].z = "DD/MM/YYYY HH:MM";
} else {
ws[i].s.numFmt = "00.00"; // other numbers
}
if (cell.r == 0 ) { // first row
ws[i].s.border.bottom = { // bottom border
style: "thin",
color: "000000"
};
}
if (cell.r % 2) { // every other row
ws[i].s.fill = { // background color
patternType: "solid",
fgColor: { rgb: "b2b2b2" },
bgColor: { rgb: "b2b2b2" }
};
}
}
I used sheetjs-style (which is a fork of sheetjs) to add formatting to cells in excel file.
ws["A1"].s = // set the style for target cell
font: {
name: '宋体',
sz: 24,
bold: true,
color: { rgb: "FFAA00" }
},
};
It's very easy. However, you have to add style to each individual cell. It's not convenient to add style to a range of cells.
UPDATE: The official example use color "FFFFAA00". But I removed the first "FF" and it still works as before. The removed part is used for transparency (see COLOR_SPEC in Cell Styles), but somehow it has no effect when I change it or remove it.
After testing all the above options. For ReactJS I finally found a package that worked perfectly.
https://github.com/ShanaMaid/sheetjs-style
import XLSX from 'sheetjs-style';
var workbook = XLSX.utils.book_new();
var ws = XLSX.utils.aoa_to_sheet([
["A1", "B1", "C1"],
["A2", "B2", "C2"],
["A3", "B3", "C3"]
])
ws['A1'].s = {
font: {
name: 'arial',
sz: 24,
bold: true,
color: "#F2F2F2"
},
}
XLSX.utils.book_append_sheet(workbook, ws, "SheetName");
XLSX.writeFile(workbook, 'FileName.xlsx');
Note following points while adding styling:-
Cell should not be empty
First add data into the cell, then add styling to that cell.
For 2 days I was struck and did not got any styling appearing on my excel file since I was just adding styling before adding the data.Don't do that it won't appear.
I used xlsx-js-style Package and added the styles to my excel in the following way :-
XLSX.utils.sheet_add_aoa(worksheet, [["Firstname"]], { origin: "A1"
});
const LightBlue = {
fgColor: { rgb: "BDD7EE" }
};
const alignmentCenter = { horizontal: "center", vertical: "center", wrapText: true };
const ThinBorder = {
top: { style: "thin" },
bottom: { style: "thin" },
left: { style: "thin" },
right: { style: "thin" }
};
const fillAlignmentBorder = {
fill: LightBlue,
alignment: alignmentCenter,
border: ThinBorder
};
worksheet["A1"].s = fillAlignmentBorder;
Hope this helps.....Happy Coding :-)