aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/DataVizBox/components/LineChart.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/DataVizBox/components/LineChart.tsx')
-rw-r--r--src/client/views/nodes/DataVizBox/components/LineChart.tsx105
1 files changed, 74 insertions, 31 deletions
diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
index e6a06a454..6a223e683 100644
--- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
@@ -6,11 +6,15 @@ import * as d3 from 'd3';
import { Doc, DocListCast } from '../../../../../fields/Doc';
import { List } from '../../../../../fields/List';
import { listSpec } from '../../../../../fields/Schema';
-import { Cast } from '../../../../../fields/Types';
+import { Cast, DocCast, NumCast } from '../../../../../fields/Types';
import { Docs } from '../../../../documents/Documents';
import { PinProps, PresBox } from '../../trails';
import { createLineGenerator, drawLine, minMaxRange, scaleCreatorNumerical, xAxisCreator, xGrid, yAxisCreator, yGrid } from '../utils/D3Utils';
import './Chart.scss';
+import { LinkManager } from '../../../../util/LinkManager';
+import { DocumentManager } from '../../../../util/DocumentManager';
+import { Id } from '../../../../../fields/FieldSymbols';
+import { DataVizBox } from '../DataVizBox';
export interface DataPoint {
x: number;
@@ -40,7 +44,7 @@ export class LineChart extends React.Component<LineChartProps> {
private _disposers: { [key: string]: IReactionDisposer } = {};
private _lineChartRef: React.RefObject<HTMLDivElement> = React.createRef();
private _lineChartSvg: d3.Selection<SVGGElement, unknown, null, undefined> | undefined;
- private _rangeVals: { xMin?: number; xMax?: number;yMin?: number;yMax?: number;}= {};
+ private _rangeVals: { xMin?: number; xMax?: number; yMin?: number; yMax?: number } = {};
@observable _currSelected: SelectedDataPoint | undefined = undefined;
@observable _lineChartData: 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
@@ -51,9 +55,11 @@ export class LineChart extends React.Component<LineChartProps> {
componentDidMount = () => {
this._disposers.chartdata = reaction(
() => this.props.axes.slice(),
- axes => {if (axes.length > 1) {
- this._lineChartData = [this.props.pairs?.map(pair => ({ x: Number(pair[this.props.axes[0]]), y: Number(pair[this.props.axes[1]]) })).sort((a,b) => a.x < b.x ? 1:-1)]
- }},
+ axes => {
+ if (axes.length > 1) {
+ this._lineChartData = [this.props.pairs?.map(pair => ({ x: Number(pair[this.props.axes[0]]), y: Number(pair[this.props.axes[1]]) })).sort((a, b) => (a.x < b.x ? -1 : 1))];
+ }
+ },
{ fireImmediately: true }
);
this._disposers.chartData = reaction(
@@ -78,12 +84,38 @@ export class LineChart extends React.Component<LineChartProps> {
},
{ fireImmediately: true }
);
+ this._disposers.highlights = reaction(
+ () => ({
+ selected: this._currSelected,
+ pairs: LinkManager.Instance.getAllRelatedLinks(this.props.rootDoc)
+ .filter(link => link.anchor1 !== this.props.rootDoc) // all links that are pointing to this node
+ .map(link => DocCast(link.anchor1)) // get the documents that are pointing to this node
+ .map(anchor => DocumentManager.Instance.getFirstDocumentView(anchor)?.ComponentView as DataVizBox) // get their data viz boxes
+ .filter(dvb => dvb)
+ .map(dvb => dvb.pairs.filter(pair => pair['select' + dvb.rootDoc[Id]])) // get all the datapoints they have selected field set by incoming anchor
+ .lastElement(),
+ }),
+ ({ selected, pairs }) => {
+ this.clearAnnoations();
+ selected && this.drawAnnotations(Number(selected.x), Number(selected.y), true);
+ pairs.forEach(pair => this.drawAnnotations(Number(pair[this.props.axes[0]]), Number(pair[this.props.axes[1]])));
+ },
+ { fireImmediately: true }
+ );
};
// anything that doesn't need to be recalculated should just be stored as drawCharts (i.e. computed values) and drawChart is gonna iterate over these observables and generate svgs based on that
+ clearAnnoations = () => {
+ const elements = document.querySelectorAll('.datapoint');
+ for (let i = 0; i < elements.length; i++) {
+ const element = elements[i];
+ element.classList.remove('highlight');
+ element.classList.remove('selected');
+ }
+ };
// gets called whenever the "data-annotations" fields gets updated
- drawAnnotations(dataX: number, dataY: number) {
+ drawAnnotations = (dataX: number, dataY: number, selected?: boolean) => {
// TODO: nda - can optimize this by having some sort of mapping of the x and y values to the individual circle elements
// loop through all html elements with class .circle-d1 and find the one that has "data-x" and "data-y" attributes that match the dataX and dataY
// if it exists, then highlight it
@@ -94,14 +126,13 @@ export class LineChart extends React.Component<LineChartProps> {
const x = element.getAttribute('data-x');
const y = element.getAttribute('data-y');
if (x === dataX.toString() && y === dataY.toString()) {
- element.classList.add('highlight');
+ element.classList.add(selected ? 'selected' : 'highlight');
}
// TODO: nda - this remove highlight code should go where we remove the links
// } else {
- // element.classList.remove('highlight');
// }
}
- }
+ };
removeAnnotations(dataX: number, dataY: number) {
// loop through and remove any annotations that no longer exist
@@ -115,7 +146,7 @@ export class LineChart extends React.Component<LineChartProps> {
return true;
}
if (this._currSelected) {
- this._currSelected = undefined;
+ this.setCurrSelected();
return true;
}
return false;
@@ -123,9 +154,7 @@ export class LineChart extends React.Component<LineChartProps> {
// create a document anchor that stores whatever is needed to reconstruct the viewing state (selection,zoom,etc)
getAnchor = (pinProps?: PinProps) => {
- const anchor = Docs.Create.TextanchorDocument({
- title: 'line doc selection' + this._currSelected?.x,
- });
+ const anchor = Docs.Create.TextanchorDocument({ title: 'line doc selection' + this._currSelected?.x, unrendered: true });
PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: pinProps?.pinData }, this.props.dataDoc);
anchor.presDataVizSelection = this._currSelected ? new List<number>([this._currSelected.x, this._currSelected.y]) : undefined;
return anchor;
@@ -140,7 +169,7 @@ export class LineChart extends React.Component<LineChartProps> {
}
setupTooltip() {
- const tooltip = d3
+ return d3
.select(this._lineChartRef.current)
.append('div')
.attr('class', 'tooltip')
@@ -150,14 +179,15 @@ export class LineChart extends React.Component<LineChartProps> {
.style('padding', '5px')
.style('position', 'absolute')
.style('font-size', '12px');
- return tooltip;
}
// TODO: nda - use this everyewhere we update currSelected?
@action
- setCurrSelected(x: number, y: number) {
+ setCurrSelected(x?: number, y?: number) {
// TODO: nda - get rid of svg element in the list?
- this._currSelected = { x, y };
+ this._currSelected = x !== undefined && y !== undefined ? { x, y } : undefined;
+ this.props.pairs.forEach(pair => pair[this.props.axes[0]] === x && pair[this.props.axes[1]] === y && (pair.selected = true));
+ this.props.pairs.forEach(pair => (pair.selected = pair[this.props.axes[0]] === x && pair[this.props.axes[1]] === y ? true : undefined));
}
drawDataPoints(data: DataPoint[], idx: number, xScale: d3.ScaleLinear<number, number, never>, yScale: d3.ScaleLinear<number, number, never>) {
@@ -215,32 +245,29 @@ export class LineChart extends React.Component<LineChartProps> {
// draw the datapoint circle
this.drawDataPoints(data, 0, xScale, yScale);
- const focus = svg.append('g').attr('class', 'focus').style('display', 'none');
- focus.append('circle').attr('r', 5).attr('class', 'circle');
+ const higlightFocusPt = svg.append('g').style('display', 'none');
+ higlightFocusPt.append('circle').attr('r', 5).attr('class', 'circle');
const tooltip = this.setupTooltip();
// add all the tooltipContent to the tooltip
const mousemove = action((e: any) => {
const bisect = d3.bisector((d: DataPoint) => d.x).left;
const xPos = d3.pointer(e)[0];
- const x0 = bisect(data, xScale.invert(xPos - 25)); // shift x by -25 so that you can reach points on the left-side axis
+ const x0 = Math.min(data.length - 1, bisect(data, xScale.invert(xPos - 5))); // shift x by -5 so that you can reach points on the left-side axis
const d0 = data[x0];
- focus.attr('transform', `translate(${xScale(d0.x)},${yScale(d0.y)})`);
- tooltip.transition().duration(300).style('opacity', 0.9);
- // TODO: nda - updating the inner html could be deadly cause injection attacks!
- tooltip
- .html(() => `<b>(${d0.x},${d0.y})</b>`) // text content for tooltip
- .style('pointer-events', 'none')
- .style('transform', `translate(${xScale(d0.x) - this.width / 2 + 12}px,${yScale(d0.y) + 30}px)`);
+ if (!d0) return;
+
+ this.updateTooltip(higlightFocusPt, xScale, d0, yScale, tooltip);
});
const onPointClick = action((e: any) => {
const bisect = d3.bisector((d: DataPoint) => d.x).left;
const xPos = d3.pointer(e)[0];
- const x0 = bisect(data, xScale.invert(xPos - 25)); // shift x by -25 so that you can reach points on the left-side axis
+ const x0 = bisect(data, xScale.invert(xPos - 5)); // shift x by -5 so that you can reach points on the left-side axis
const d0 = data[x0];
// find .circle-d1 with data-x = d0.x and data-y = d0.y
const selected = svg.selectAll('.datapoint').filter((d: any) => d['data-x'] === d0.x && d['data-y'] === d0.y);
- this._currSelected = { x: d0.x, y: d0.y, elem: selected };
+ this.setCurrSelected(d0.x, d0.y);
+ this.updateTooltip(higlightFocusPt, xScale, d0, yScale, tooltip);
});
svg.append('rect')
@@ -250,17 +277,33 @@ export class LineChart extends React.Component<LineChartProps> {
.attr('fill', 'none')
.attr('translate', `translate(${margin.left}, ${-(margin.top + margin.bottom)})`)
.style('opacity', 0)
- .on('mouseover', () => focus.style('display', null))
+ .on('mouseover', () => higlightFocusPt.style('display', null))
.on('mouseout', () => tooltip.transition().duration(300).style('opacity', 0))
.on('mousemove', mousemove)
.on('click', onPointClick);
};
+ private updateTooltip(
+ higlightFocusPt: d3.Selection<SVGGElement, unknown, null, undefined>,
+ xScale: d3.ScaleLinear<number, number, never>,
+ d0: DataPoint,
+ yScale: d3.ScaleLinear<number, number, never>,
+ tooltip: d3.Selection<HTMLDivElement, unknown, null, undefined>
+ ) {
+ higlightFocusPt.attr('transform', `translate(${xScale(d0.x)},${yScale(d0.y)})`).attr('class', this._currSelected?.x === d0.x && this._currSelected?.y === d0.y ? 'focus-selected' : 'focus');
+ tooltip.transition().duration(300).style('opacity', 0.9);
+ // TODO: nda - updating the inner html could be deadly cause injection attacks!
+ tooltip
+ .html(() => `<b>(${d0.x},${d0.y})</b>`) // text content for tooltip
+ .style('pointer-events', 'none')
+ .style('transform', `translate(${xScale(d0.x) - this.width / 2}px,${yScale(d0.y) - 30}px)`);
+ }
+
render() {
const selectedPt = this._currSelected ? `x: ${this._currSelected.x} y: ${this._currSelected.y}` : 'none';
return (
<div ref={this._lineChartRef} className="chart-container">
- <span> {this.props.axes.length < 2 ? 'first use table view to select two axes to plot' : `Curr Selected: ${selectedPt}`}</span>
+ <span> {this.props.axes.length < 2 ? 'first use table view to select two axes to plot' : `Selected: ${selectedPt}`}</span>
</div>
);
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 08:13:55 +0000