aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/DataVizBox/components/LineChart.tsx
diff options
context:
space:
mode:
authorbobzel <zzzman@gmail.com>2025-05-05 12:37:09 -0400
committerbobzel <zzzman@gmail.com>2025-05-05 12:37:09 -0400
commit3a733aa0fd24517e83649824dec0fc8bcc0bde43 (patch)
treeac01848cdab3b83582c0b7ab6f3d2b1c8187a24f /src/client/views/nodes/DataVizBox/components/LineChart.tsx
parente058d227ccbce47c86b0fa558adb01dfccaf4d60 (diff)
parentd4659e2bd3ddb947683948083232c26fb1227f39 (diff)
Merge branch 'master' into joanne-tutorialagent
Diffstat (limited to 'src/client/views/nodes/DataVizBox/components/LineChart.tsx')
-rw-r--r--src/client/views/nodes/DataVizBox/components/LineChart.tsx33
1 files changed, 20 insertions, 13 deletions
diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
index b55d509ff..80fadf178 100644
--- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
@@ -22,11 +22,11 @@ export interface SelectedDataPoint extends DataPoint {
}
export interface LineChartProps {
vizBox: DataVizBox;
- Document: Doc;
+ Doc: Doc;
layoutDoc: Doc;
axes: string[];
titleCol: string;
- records: { [key: string]: any }[];
+ records: { [key: string]: string }[];
width: number;
height: number;
dataDoc: Doc;
@@ -47,13 +47,13 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
@observable _currSelected: DataPoint | undefined = undefined;
// TODO: nda - some sort of mapping that keeps track of the annotated points so we can easily remove when annotations list updates
- constructor(props: any) {
+ constructor(props: LineChartProps) {
super(props);
makeObservable(this);
}
@computed get titleAccessor() {
- let titleAccessor: any = 'dataViz_lineChart_title';
+ let titleAccessor = 'dataViz_lineChart_title';
if (this._props.axes.length === 2) titleAccessor = titleAccessor + this._props.axes[0] + '-' + this._props.axes[1];
else if (this._props.axes.length > 0) titleAccessor += this._props.axes[0];
return titleAccessor;
@@ -74,12 +74,12 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
return this._props.axes[1] + ' vs. ' + this._props.axes[0] + ' Line Chart';
}
@computed get parentViz() {
- return DocCast(this._props.Document.dataViz_parentViz);
+ return DocCast(this._props.Doc.dataViz_parentViz);
}
@computed get incomingHighlited() {
// return selected x and y axes
// otherwise, use the selection of whatever is linked to us
- const incomingVizBox = DocumentView.getFirstDocumentView(this.parentViz)?.ComponentView as DataVizBox;
+ const incomingVizBox = this.parentViz && (DocumentView.getFirstDocumentView(this.parentViz)?.ComponentView as DataVizBox);
const highlitedRowIds = NumListCast(incomingVizBox?.layoutDoc?.dataViz_highlitedRows);
return this._tableData.filter((record, i) => highlitedRowIds.includes(this._tableDataIds[i])); // get all the datapoints they have selected field set by incoming anchor
}
@@ -113,7 +113,7 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
//
title: 'line doc selection' + (this._currSelected?.x ?? ''),
});
- PinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: pinProps?.pinData }, this._props.Document);
+ PinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: pinProps?.pinData }, this._props.Doc);
anchor.config_dataVizSelection = this._currSelected ? new List<number>([this._currSelected.x, this._currSelected.y]) : undefined;
return anchor;
};
@@ -170,8 +170,8 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
}
});
if (!ptWasSelected) {
- selectedDatapoints.push(d.x + ',' + d.y);
- this._currSelected = selectedDatapoints.length > 1 ? undefined : d;
+ selectedDatapoints?.push(d.x + ',' + d.y);
+ this._currSelected = (selectedDatapoints?.length ?? 0 > 1) ? undefined : d;
}
// for filtering child dataviz docs
@@ -190,7 +190,14 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
}
}
- drawDataPoints(data: DataPoint[], idx: number, xScale: d3.ScaleLinear<number, number, never>, yScale: d3.ScaleLinear<number, number, never>, higlightFocusPt: any, tooltip: any) {
+ drawDataPoints(
+ data: DataPoint[], //
+ idx: number,
+ xScale: d3.ScaleLinear<number, number, never>,
+ yScale: d3.ScaleLinear<number, number, never>,
+ higlightFocusPt: d3.Selection<SVGGElement, unknown, null, undefined>,
+ tooltip: d3.Selection<HTMLDivElement, unknown, null, undefined>
+ ) {
if (this._lineChartSvg) {
const circleClass = '.circle-' + idx;
this._lineChartSvg
@@ -211,7 +218,7 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
.on('mouseleave', () => {
tooltip?.transition().duration(300).style('opacity', 0);
})
- .on('click', (e: any) => {
+ .on('click', e => {
const d0 = { x: Number(e.target.getAttribute('data-x')), y: Number(e.target.getAttribute('data-y')) };
// find .circle-d1 with data-x = d0.x and data-y = d0.y
this.setCurrSelected(d0);
@@ -220,7 +227,7 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
}
}
- drawChart = (dataSet: any[][], rangeVals: { xMin?: number; xMax?: number; yMin?: number; yMax?: number }, width: number, height: number) => {
+ drawChart = (dataSet: { x: number; y: number }[][], rangeVals: { xMin?: number; xMax?: number; yMin?: number; yMax?: number }, width: number, height: number) => {
// clearing tooltip and the current chart
d3.select(this._lineChartRef).select('svg').remove();
d3.select(this._lineChartRef).select('.tooltip').remove();
@@ -277,7 +284,7 @@ export class LineChart extends ObservableReactComponent<LineChartProps> {
svg.append('path').attr('stroke', 'red');
// legend
- const color: any = d3.scaleOrdinal().range(['black', 'blue']).domain([this._props.axes[1], this._props.axes[2]]);
+ const color = d3.scaleOrdinal().range(['black', 'blue']).domain([this._props.axes[1], this._props.axes[2]]);
svg.selectAll('mydots')
.data([this._props.axes[1], this._props.axes[2]])
.enter()