aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/nodes/DataVizBox/DataVizBox.tsx19
-rw-r--r--src/client/views/nodes/DataVizBox/components/Histogram.tsx43
2 files changed, 44 insertions, 18 deletions
diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 80586d7c7..e08c55197 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -71,12 +71,14 @@ 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.defaultHistogramColor = data.defaultHistogramColor;
+ this.layoutDoc.pieSliceColors = data.pieSliceColors;
Object.keys(this.layoutDoc).map(key => {
- if (key.startsWith('histogram-title') || key.startsWith('histogramBarColors') || key.startsWith('defaultHistogramColor')
- || key.startsWith('lineChart-title') || key.startsWith('pieChart-title') || key.startsWith('pieSliceColors')){
- this.layoutDoc['_'+key] = data[key];
- }
+ if (key.startsWith('histogram-title') || key.startsWith('lineChart-title') || key.startsWith('pieChart-title')){ this.layoutDoc['_'+key] = data[key]; }
})
+
const func = () => this._chartRenderer?.restoreView(data);
if (changedView || changedAxes) {
setTimeout(func, 100);
@@ -97,11 +99,12 @@ 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.defaultHistogramColor = this.layoutDoc.defaultHistogramColor;
+ anchor.pieSliceColors = this.layoutDoc.pieSliceColors;
Object.keys(this.layoutDoc).map(key => {
- if (key.startsWith('histogram-title') || key.startsWith('histogramBarColors') || key.startsWith('defaultHistogramColor')
- || key.startsWith('lineChart-title') || key.startsWith('pieChart-title') || key.startsWith('pieSliceColors')){
- anchor[key] = this.layoutDoc[key];
- }
+ if (key.startsWith('histogram-title') || key.startsWith('lineChart-title') || key.startsWith('pieChart-title')){ anchor[key] = this.layoutDoc[key]; }
})
this.addDocument(anchor);
diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index 1077df844..b574a0062 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.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";
@@ -12,8 +12,10 @@ import { PinProps, PresBox } from "../../trails";
import { Docs } from "../../../../documents/Documents";
import { List } from "../../../../../fields/List";
import './Chart.scss';
-import { ColorPicker, EditableText, Size, Type } from "browndash-components";
+import { ColorPicker, EditableText, IconButton, Size, Type } from "browndash-components";
import { FaFillDrip } from "react-icons/fa";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { listSpec } from "../../../../../fields/Schema";
export interface HistogramProps {
rootDoc: Doc;
@@ -183,7 +185,7 @@ export class Histogram extends React.Component<HistogramProps> {
title: 'histogram 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;
};
@@ -303,7 +305,7 @@ export class Histogram extends React.Component<HistogramProps> {
xAxis = d3.axisBottom(x)
.ticks(numBins-1)
}
- const maxFrequency = this.numericalYData? d3.max(histDataSet, function(d) { return d[yAxisTitle].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')})
+ const maxFrequency = this.numericalYData? d3.max(histDataSet, function(d) { return d[yAxisTitle]!.replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')})
: d3.max(bins, function(d) { return d.length; })
var y = d3.scaleLinear()
@@ -382,13 +384,21 @@ export class Histogram extends React.Component<HistogramProps> {
function(d) {
return (selected && selected[0]==d[0])? 'histogram-bar hover' : 'histogram-bar';
}: function(d) {return 'histogram-bar'})
- .attr("fill", (d)=>{ return this.props.layoutDoc['histogramBarColors-'+d[0]]? StrCast(this.props.layoutDoc['histogramBarColors-'+d[0]]) : StrCast(this.props.layoutDoc['defaultHistogramColor'])})
+ .attr("fill", (d)=>{
+ var barColor;
+ var barColors = StrListCast(this.props.layoutDoc.histogramBarColors).map(each => each.split('::'));
+ barColors.map(each => {if (each[0]==StrCast(d[0])) barColor = each[1]});
+ return barColor? StrCast(barColor) : StrCast(this.props.layoutDoc.defaultHistogramColor)})
};
@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;
+ // 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.push(StrCast(barName + '::' + color));
};
@action changeDefaultColor = (color: string) => {
@@ -397,7 +407,7 @@ export class Histogram extends React.Component<HistogramProps> {
else return true;
})
defaultColorBars.attr("fill", color);
- this.props.layoutDoc['defaultHistogramColor'] = color;
+ this.props.layoutDoc.defaultHistogramColor = color;
};
render() {
@@ -406,7 +416,8 @@ export class Histogram extends React.Component<HistogramProps> {
if (this.props.axes.length==2) titleAccessor = 'histogram-title-'+this.props.axes[0]+'-'+this.props.axes[1];
else if (this.props.axes.length>0) titleAccessor = 'histogram-title-'+this.props.axes[0];
if (!this.props.layoutDoc[titleAccessor]) this.props.layoutDoc[titleAccessor] = this.defaultGraphTitle;
- if (!this.props.layoutDoc['defaultHistogramColor']) this.props.layoutDoc['defaultHistogramColor'] = '#69b3a2';
+ if (!this.props.layoutDoc.defaultHistogramColor) this.props.layoutDoc.defaultHistogramColor = '#69b3a2';
+ if (!this.props.layoutDoc.histogramBarColors) this.props.layoutDoc.histogramBarColors = new List<string>();
var selected: string;
if (this._currSelected){
curSelectedBarName = StrCast(this._currSelected![this.props.axes[0]].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, ''))
@@ -418,6 +429,9 @@ export class Histogram extends React.Component<HistogramProps> {
selected += ' }';
}
else selected = 'none';
+ var selectedBarColor;
+ var barColors = StrListCast(this.props.layoutDoc.histogramBarColors).map(each => each.split('::'));
+ barColors.map(each => {if (each[0]==curSelectedBarName!) selectedBarColor = each[1]});
this.componentDidMount();
return (
@@ -436,10 +450,19 @@ export class Histogram extends React.Component<HistogramProps> {
tooltip={'Change Default Bar Color'}
type={Type.SEC}
icon={<FaFillDrip/>}
- selectedColor={StrCast(this.props.layoutDoc['defaultHistogramColor'])}
+ selectedColor={StrCast(this.props.layoutDoc.defaultHistogramColor)}
setSelectedColor={color => this.changeDefaultColor(color)}
size={Size.XSMALL}
/>
+ &nbsp;
+ <IconButton
+ icon={<FontAwesomeIcon icon={'eraser'} />}
+ size={Size.XSMALL}
+ color={'black'}
+ type={Type.SEC}
+ tooltip={'Revert all bars to the default color'}
+ onClick={action(() => {this.props.layoutDoc.histogramBarColors = new List<string>()})}
+ />
</div>
{selected != 'none' ?
<div className={'selected-data'}>
@@ -449,7 +472,7 @@ export class Histogram extends React.Component<HistogramProps> {
tooltip={'Change Slice Color'}
type={Type.SEC}
icon={<FaFillDrip/>}
- selectedColor={this.props.layoutDoc['histogramBarColors-'+curSelectedBarName]? this.props.layoutDoc['histogramBarColors-'+curSelectedBarName] : this.curBarSelected.attr("fill")}
+ selectedColor={selectedBarColor? selectedBarColor : this.curBarSelected.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-09 12:32:35 +0000