aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/DataVizBox/components/PieChart.tsx
diff options
context:
space:
mode:
authorbobzel <zzzman@gmail.com>2023-08-26 13:54:43 -0400
committerbobzel <zzzman@gmail.com>2023-08-26 13:54:43 -0400
commit3ee5367df2604775b5e004e3aae6b8f5e6adcb7c (patch)
treee96ef8ce24c3850447537eab77a2ec8108aeff09 /src/client/views/nodes/DataVizBox/components/PieChart.tsx
parent788fc2d0e200c7dc5b8990f38c9946db67c14d1e (diff)
parent1108eee6c72b1b7f74a400a7af55c2f71d09c333 (diff)
Merge branch 'master' into data-visualization-sarah
Diffstat (limited to 'src/client/views/nodes/DataVizBox/components/PieChart.tsx')
-rw-r--r--src/client/views/nodes/DataVizBox/components/PieChart.tsx50
1 files changed, 24 insertions, 26 deletions
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index 8be8b7c7c..de6263198 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -52,7 +52,7 @@ export class PieChart extends React.Component<PieChartProps> {
// organized by specified number percentages/ratios if one column is selected and it contains numbers
// otherwise, assume data is organized by categories
@computed get byCategory() {
- return !/\d/.test(this.props.records[0][this.props.axes[0]]);
+ return this.props.axes.length === 1 || !/\d/.test(this.props.records[0][this.props.axes[0]]);
}
// filters all data to just display selected data if brushed (created from an incoming link)
@computed get _pieChartData() {
@@ -265,7 +265,7 @@ export class PieChart extends React.Component<PieChartProps> {
var sliceColor;
if (dataPoint) {
const sliceTitle = dataPoint[this.props.axes[0]];
- const accessByName = StrCast(sliceTitle)? StrCast(sliceTitle).replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '') : sliceTitle;
+ const accessByName = StrCast(sliceTitle) ? StrCast(sliceTitle).replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '') : sliceTitle;
var sliceColors = StrListCast(this.props.layoutDoc.dataViz_pie_sliceColors).map(each => each.split('::'));
sliceColors.forEach(each => each[0] == accessByName && (sliceColor = each[1]));
}
@@ -289,35 +289,31 @@ export class PieChart extends React.Component<PieChartProps> {
// adding labels
trackDuplicates = {};
data.forEach((eachData: any) => (!trackDuplicates[eachData] ? (trackDuplicates[eachData] = 0) : null));
- arcs.append('text')
- .attr('transform', function (d) {
- var centroid = arc.centroid(d as unknown as d3.DefaultArcObject);
- var heightOffset = (centroid[1] / radius) * Math.abs(centroid[1]);
- return 'translate(' + (centroid[0] + centroid[0] / (radius * 0.02)) + ',' + (centroid[1] + heightOffset) + ')';
- })
- .attr('text-anchor', 'middle')
- .text(function (d) {
- var possibleDataPoints = pieDataSet.filter((each: { [x: string]: any | { valueOf(): number } }) => {
- try {
- return Number(each[percentField].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')) == Number(d.data);
- } catch (error) {
- return each[percentField] == d.data;
+ arcs.size() < 100 &&
+ arcs
+ .append('text')
+ .attr('transform', function (d) {
+ var centroid = arc.centroid(d as unknown as d3.DefaultArcObject);
+ var heightOffset = (centroid[1] / radius) * Math.abs(centroid[1]);
+ return 'translate(' + (centroid[0] + centroid[0] / (radius * 0.02)) + ',' + (centroid[1] + heightOffset) + ')';
+ })
+ .attr('text-anchor', 'middle')
+ .text(function (d) {
+ var dataPoint;
+ const possibleDataPoints = possibleDataPointVals.filter((pval: any) => pval[percentField] === Number(d.data));
+ if (possibleDataPoints.length == 1) dataPoint = possibleDataPoints[0];
+ else {
+ dataPoint = possibleDataPoints[trackDuplicates[d.data.toString()]];
+ trackDuplicates[d.data.toString()] = trackDuplicates[d.data.toString()] + 1;
}
+ return dataPoint ? dataPoint[percentField]! + (!descriptionField ? '' : ' - ' + dataPoint[descriptionField])! : '';
});
- var dataPoint;
- if (possibleDataPoints.length == 1) dataPoint = possibleDataPoints[0];
- else {
- dataPoint = possibleDataPoints[trackDuplicates[d.data.toString()]];
- trackDuplicates[d.data.toString()] = trackDuplicates[d.data.toString()] + 1;
- }
- return dataPoint ? dataPoint[percentField]! + (!descriptionField ? '' : ' - ' + dataPoint[descriptionField])! : '';
- });
};
@action changeSelectedColor = (color: string) => {
this.curSliceSelected.attr('fill', color);
const sliceTitle = this._currSelected[this.props.axes[0]];
- const sliceName = StrCast(sliceTitle)? StrCast(sliceTitle).replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '') : sliceTitle;
+ const sliceName = StrCast(sliceTitle) ? StrCast(sliceTitle).replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '') : sliceTitle;
const sliceColors = Cast(this.props.layoutDoc.dataViz_pie_sliceColors, listSpec('string'), null);
sliceColors.map(each => {
@@ -336,7 +332,7 @@ export class PieChart extends React.Component<PieChartProps> {
var curSelectedSliceName = '';
if (this._currSelected) {
const sliceTitle = this._currSelected[this.props.axes[0]];
- curSelectedSliceName = StrCast(sliceTitle)? StrCast(sliceTitle).replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '') : sliceTitle;
+ curSelectedSliceName = StrCast(sliceTitle) ? StrCast(sliceTitle).replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '') : sliceTitle;
selected = '{ ';
Object.keys(this._currSelected).map(key => {
key != '' ? (selected += key + ': ' + this._currSelected[key] + ', ') : '';
@@ -346,7 +342,9 @@ export class PieChart extends React.Component<PieChartProps> {
} else selected = 'none';
var selectedSliceColor;
var sliceColors = StrListCast(this.props.layoutDoc.dataViz_pie_sliceColors).map(each => each.split('::'));
- sliceColors.forEach(each => { if (each[0] == curSelectedSliceName!) selectedSliceColor = each[1] });
+ sliceColors.forEach(each => {
+ if (each[0] == curSelectedSliceName!) selectedSliceColor = each[1];
+ });
if (this._pieChartData.length > 0 || !this.parentViz) {
return this.props.axes.length >= 1 ? (