aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/views/nodes/DataVizBox/DataVizBox.tsx14
-rw-r--r--src/client/views/nodes/DataVizBox/components/Histogram.tsx14
-rw-r--r--src/client/views/nodes/DataVizBox/components/PieChart.tsx22
3 files changed, 26 insertions, 24 deletions
diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index e08c55197..a92fc1eb9 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -1,7 +1,7 @@
import { action, computed, ObservableMap, ObservableSet } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
-import { Doc, StrListCast } from '../../../../fields/Doc';
+import { Doc, Field, StrListCast } from '../../../../fields/Doc';
import { List } from '../../../../fields/List';
import { Cast, CsvCast, StrCast } from '../../../../fields/Types';
import { CsvField } from '../../../../fields/URLField';
@@ -71,10 +71,10 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
restoreView = (data: Doc) => {
const changedView = this.dataVizView !== data.presDataVizView && (this.layoutDoc._dataVizView = data.presDataVizView);
const changedAxes = this.axes.join('') !== StrListCast(data.presDataVizAxes).join('') && (this.layoutDoc._data_vizAxes = new List<string>(StrListCast(data.presDataVizAxes)));
- // this.layoutDoc.selected = data.selected;
- // this.layoutDoc.histogramBarColors = data.histogramBarColors;
+ this.layoutDoc.selected = Field.Copy(data.selected);
+ this.layoutDoc.histogramBarColors = Field.Copy(data.histogramBarColors);
this.layoutDoc.defaultHistogramColor = data.defaultHistogramColor;
- this.layoutDoc.pieSliceColors = data.pieSliceColors;
+ this.layoutDoc.pieSliceColors = Field.Copy(data.pieSliceColors);
Object.keys(this.layoutDoc).map(key => {
if (key.startsWith('histogram-title') || key.startsWith('lineChart-title') || key.startsWith('pieChart-title')){ this.layoutDoc['_'+key] = data[key]; }
})
@@ -99,10 +99,10 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
anchor.presDataVizView = this.dataVizView;
anchor.presDataVizAxes = this.axes.length ? new List<string>(this.axes) : undefined;
- // anchor.selected = this.layoutDoc.selected;
- // anchor.histogramBarColors = this.layoutDoc.histogramBarColors;
+ anchor.selected = Field.Copy(this.layoutDoc.selected);
+ anchor.histogramBarColors = Field.Copy(this.layoutDoc.histogramBarColors);
anchor.defaultHistogramColor = this.layoutDoc.defaultHistogramColor;
- anchor.pieSliceColors = this.layoutDoc.pieSliceColors;
+ anchor.pieSliceColors = Field.Copy(this.layoutDoc.pieSliceColors);
Object.keys(this.layoutDoc).map(key => {
if (key.startsWith('histogram-title') || key.startsWith('lineChart-title') || key.startsWith('pieChart-title')){ anchor[key] = this.layoutDoc[key]; }
})
diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index b574a0062..02f1ddbbb 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -394,21 +394,11 @@ export class Histogram extends React.Component<HistogramProps> {
@action changeSelectedColor = (color: string) => {
this.curBarSelected.attr("fill", color);
var barName = StrCast(this._currSelected[this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, ''))
- // this.props.layoutDoc['histogramBarColors-'+barName] = color;
const barColors = Cast(this.props.layoutDoc.histogramBarColors, listSpec("string"), null);
- barColors.map(each => { if (each.split('::')[0] == barName) barColors.splice(barColors.indexOf(each)) });
+ barColors.map(each => { if (each.split('::')[0] == barName) barColors.splice(barColors.indexOf(each), 1) });
barColors.push(StrCast(barName + '::' + color));
};
-
- @action changeDefaultColor = (color: string) => {
- const defaultColorBars = this._histogramSvg!.selectAll('.histogram-bar').filter((d: any) => {
- if (this.props.layoutDoc['histogramBarColors-'+d[0]]) return false;
- else return true;
- })
- defaultColorBars.attr("fill", color);
- this.props.layoutDoc.defaultHistogramColor = color;
- };
render() {
var curSelectedBarName;
@@ -451,7 +441,7 @@ export class Histogram extends React.Component<HistogramProps> {
type={Type.SEC}
icon={<FaFillDrip/>}
selectedColor={StrCast(this.props.layoutDoc.defaultHistogramColor)}
- setSelectedColor={color => this.changeDefaultColor(color)}
+ setSelectedColor={color => this.props.layoutDoc.defaultHistogramColor = color}
size={Size.XSMALL}
/>
&nbsp;
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index f3a72a53b..8fdead3d7 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
import * as d3 from 'd3';
import { IReactionDisposer, action, computed, observable, reaction } from "mobx";
import { LinkManager } from "../../../../util/LinkManager";
-import { DocCast, StrCast} from "../../../../../fields/Types";
+import { Cast, DocCast, StrCast} from "../../../../../fields/Types";
import { DocumentManager } from "../../../../util/DocumentManager";
import { Id } from "../../../../../fields/FieldSymbols";
import { DataVizBox } from "../DataVizBox";
@@ -14,6 +14,7 @@ import { List } from "../../../../../fields/List";
import './Chart.scss';
import { ColorPicker, EditableText, Size, Type } from "browndash-components";
import { FaFillDrip } from "react-icons/fa";
+import { listSpec } from "../../../../../fields/Schema";
export interface PieChartProps {
rootDoc: Doc;
@@ -180,7 +181,7 @@ export class PieChart extends React.Component<PieChartProps> {
title: 'piechart doc selection' + this._currSelected,
});
PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: pinProps?.pinData }, this.props.dataDoc);
- anchor.presDataVizSelection = this._currSelected ? new List<number>([this._currSelected]) : undefined;
+ // anchor.presDataVizSelection = this._currSelected ? new List<number>([this._currSelected]) : undefined;
return anchor;
};
@@ -327,7 +328,10 @@ export class PieChart extends React.Component<PieChartProps> {
trackDuplicates[d.data.toString()] = trackDuplicates[d.data.toString()] + 1;
}
var accessByName = descriptionField? dataPoint[descriptionField] : dataPoint[percentField];
- return this.props.layoutDoc['pieSliceColors-'+accessByName]? StrCast(this.props.layoutDoc['pieSliceColors-'+accessByName]) : d3.schemeSet3[i]? d3.schemeSet3[i]: d3.schemeSet3[i%12] })
+ var sliceColor;
+ var sliceColors = StrListCast(this.props.layoutDoc.pieSliceColors).map(each => each.split('::'));
+ sliceColors.map(each => {if (each[0]==StrCast(accessByName)) sliceColor = each[1]});
+ return sliceColor? StrCast(sliceColor) : d3.schemeSet3[i]? d3.schemeSet3[i]: d3.schemeSet3[i%12] })
.attr("class", selected?
function(d) {
return (selected && d.startAngle==selected.startAngle && d.endAngle==selected.endAngle)? 'slice hover' : 'slice';
@@ -364,7 +368,10 @@ export class PieChart extends React.Component<PieChartProps> {
@action changeSelectedColor = (color: string) => {
this.curSliceSelected.attr("fill", color);
var sliceName = this._currSelected[this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')
- this.props.layoutDoc['pieSliceColors-'+sliceName] = color;
+
+ const sliceColors = Cast(this.props.layoutDoc.pieSliceColors, listSpec("string"), null);
+ sliceColors.map(each => { if (each.split('::')[0] == sliceName) sliceColors.splice(sliceColors.indexOf(each), 1) });
+ sliceColors.push(StrCast(sliceName + '::' + color));
};
render() {
@@ -373,6 +380,7 @@ export class PieChart extends React.Component<PieChartProps> {
if (this.props.axes.length==2) titleAccessor = 'pieChart-title-'+this.props.axes[0]+'-'+this.props.axes[1];
else if (this.props.axes.length>0) titleAccessor = 'pieChart-title-'+this.props.axes[0];
if (!this.props.layoutDoc[titleAccessor]) this.props.layoutDoc[titleAccessor] = this.defaultGraphTitle;
+ if (!this.props.layoutDoc.pieSliceColors) this.props.layoutDoc.pieSliceColors = new List<string>();
var selected: string;
var curSelectedSliceName;
if (this._currSelected){
@@ -385,6 +393,10 @@ export class PieChart extends React.Component<PieChartProps> {
selected += ' }';
}
else selected = 'none';
+ var selectedSliceColor;
+ var sliceColors = StrListCast(this.props.layoutDoc.pieSliceColors).map(each => each.split('::'));
+ sliceColors.map(each => {if (each[0]==curSelectedSliceName!) selectedSliceColor = each[1]});
+
return (
this.props.axes.length >= 1 ? (
<div className="chart-container">
@@ -405,7 +417,7 @@ export class PieChart extends React.Component<PieChartProps> {
tooltip={'Change Slice Color'}
type={Type.SEC}
icon={<FaFillDrip/>}
- selectedColor={this.props.layoutDoc['pieSliceColors-'+curSelectedSliceName]? this.props.layoutDoc['pieSliceColors-'+curSelectedSliceName] : this.curSliceSelected.attr("fill")}
+ selectedColor={selectedSliceColor? selectedSliceColor : this.curSliceSelected.attr("fill")}
setSelectedColor={color => this.changeSelectedColor(color)}
size={Size.XSMALL}
/>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-08 15:32:00 +0000