start of pie charts

2 files changed, 297 insertions, 1 deletions

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index b8a448e46..2a0f6c17d 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -13,11 +13,13 @@ import { LineChart } from './components/LineChart';
 import { TableBox } from './components/TableBox';
 import './DataVizBox.scss';
 import { Histogram } from './components/Histogram';
+import { PieChart } from './components/PieChart';
 
 export enum DataVizView {
     TABLE = 'table',
     LINECHART = 'lineChart',
-    HISTOGRAM = 'histogram'
+    HISTOGRAM = 'histogram',
+    PIECHART = 'pieChart'
 }
 
 @observer
@@ -104,6 +106,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             case DataVizView.TABLE:     return <TableBox pairs={this.pairs} axes={this.axes} docView={this.props.DocumentView} selectAxes={this.selectAxes}/>;
             case DataVizView.LINECHART: return <LineChart ref={r => (this._chartRenderer = r ?? undefined)} height={height} width={width} fieldKey={this.fieldKey} margin={margin} rootDoc={this.rootDoc} axes={this.axes} pairs={this.pairs} dataDoc={this.dataDoc} />;
             case DataVizView.HISTOGRAM: return <Histogram height={height} width={width} fieldKey={this.fieldKey} margin={margin} rootDoc={this.rootDoc} axes={this.axes} pairs={this.pairs} dataDoc={this.dataDoc} />;
+            case DataVizView.PIECHART: return <PieChart height={height} width={width} fieldKey={this.fieldKey} margin={margin} rootDoc={this.rootDoc} axes={this.axes} pairs={this.pairs} dataDoc={this.dataDoc} />;
         }
     }
     @computed get dataUrl() {
@@ -150,6 +153,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                 <button onClick={e => this.layoutDoc._dataVizView = DataVizView.TABLE}> TABLE </button>
                 <button onClick={e => this.layoutDoc._dataVizView = DataVizView.LINECHART}> LINE CHART </button>
                 <button onClick={e => this.layoutDoc._dataVizView = DataVizView.HISTOGRAM}> HISTOGRAM </button>
+                <button onClick={e => this.layoutDoc._dataVizView = DataVizView.PIECHART}> PIE CHART </button>
                 {this.selectView}
             </div>
         );
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
new file mode 100644
index 000000000..c746e6fc1
--- /dev/null
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -0,0 +1,292 @@
+import { observer } from "mobx-react";
+import { Doc, DocListCast } from "../../../../../fields/Doc";
+import * as React from 'react';
+import * as d3 from 'd3';
+import { IReactionDisposer, action, computed, observable, reaction } from "mobx";
+import { LinkManager } from "../../../../util/LinkManager";
+import { Cast, DocCast} from "../../../../../fields/Types";
+import { DataPoint, SelectedDataPoint } from "./LineChart";
+import { DocumentManager } from "../../../../util/DocumentManager";
+import { Id } from "../../../../../fields/FieldSymbols";
+import { DataVizBox } from "../DataVizBox";
+import { listSpec } from "../../../../../fields/Schema";
+import { PinProps, PresBox } from "../../trails";
+import { Docs } from "../../../../documents/Documents";
+import { List } from "../../../../../fields/List";
+import './Chart.scss';
+import { ChatCompletionResponseMessageRoleEnum } from "openai";
+
+export interface PieChartProps {
+    rootDoc: Doc;
+    axes: string[];
+    pairs: { [key: string]: any }[];
+    width: number;
+    height: number;
+    dataDoc: Doc;
+    fieldKey: string;
+    margin: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+}
+
+@observer
+export class PieChart extends React.Component<PieChartProps> {
+
+    private _disposers: { [key: string]: IReactionDisposer } = {};
+    private _piechartRef: React.RefObject<HTMLDivElement> = React.createRef();
+    private _piechartSvg: d3.Selection<SVGGElement, unknown, null, undefined> | undefined;
+    private numericalData: boolean = false;
+    @observable _currSelected: SelectedDataPoint | undefined = undefined;
+    // TODO: nda - some sort of mapping that keeps track of the annotated points so we can easily remove when annotations list updates
+
+    @computed get _piechartData() {
+        if (this.props.axes.length < 1) return [];
+        if (this.props.axes.length < 2) {
+            var ax0 = this.props.axes[0];
+            if (/\d/.test(this.props.pairs[0][ax0])){ this.numericalData = true }
+            return this.props.pairs
+                ?.filter(pair => (!this.incomingLinks.length ? true : Array.from(Object.keys(pair)).some(key => pair[key] && key.startsWith('select'))))
+                .map(pair => ({ [ax0]: (pair[this.props.axes[0]])}))
+        };
+
+        var ax0 = this.props.axes[0];
+        var ax1 = this.props.axes[1];
+        if (/\d/.test(this.props.pairs[0][ax0])) { this.numericalData = true;}
+        return this.props.pairs
+            ?.filter(pair => (!this.incomingLinks.length ? true : Array.from(Object.keys(pair)).some(key => pair[key] && key.startsWith('select'))))
+            .map(pair => ({ [ax0]: (pair[this.props.axes[0]]), [ax1]: (pair[this.props.axes[1]]) }))
+            // .sort((a, b) => (a[ax0] < b[ax0] ? -1 : 1));
+        return this.props.pairs
+            ?.filter(pair => (!this.incomingLinks.length ? true : Array.from(Object.keys(pair)).some(key => pair[key] && key.startsWith('select'))))
+            .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));
+    }
+    @computed get incomingLinks() {
+        return LinkManager.Instance.getAllRelatedLinks(this.props.rootDoc) // out of all links
+            .filter(link => link.link_anchor_1 !== this.props.rootDoc) // get links where this chart doc is the target of the link
+            .map(link => DocCast(link.link_anchor_1)); // then return the source of the link
+    }
+    @computed get incomingSelected() {
+        // return selected x and y axes
+        // otherwise, use the selection of whatever is linked to us
+        return this.incomingLinks // all links 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: { [x: string]: any; }) => pair['select' + dvb.rootDoc[Id]])) // get all the datapoints they have selected field set by incoming anchor
+            .lastElement();
+    }
+    @computed get rangeVals(): { xMin?: number; xMax?: number; yMin?: number; yMax?: number } {
+        if (this.numericalData){
+            const data = this.data(this._piechartData);
+            return {xMin: Math.min.apply(null, data), xMax: Math.max.apply(null, data), yMin:0, yMax:0}
+        }
+        return {xMin:0, xMax:0, yMin:0, yMax:0}
+    }
+    componentWillUnmount() {
+        Array.from(Object.keys(this._disposers)).forEach(key => this._disposers[key]());
+    }
+    componentDidMount = () => {
+        this._disposers.chartData = reaction(
+            () => ({ dataSet: this._piechartData, w: this.width, h: this.height }),
+            ({ dataSet, w, h }) => {
+                if (dataSet) {
+                    this.drawChart(dataSet, w, h);
+
+                    // redraw annotations when the chart data has changed, or the local or inherited selection has changed
+                    this.clearAnnotations();
+                    this._currSelected && this.drawAnnotations(Number(this._currSelected.x), Number(this._currSelected.y), true);
+                    this.incomingSelected?.forEach((pair: any) => this.drawAnnotations(Number(pair[this.props.axes[0]]), Number(pair[this.props.axes[1]])));
+                }
+            },
+            { fireImmediately: true }
+        );
+        this._disposers.annos = reaction(
+            () => DocListCast(this.props.dataDoc[this.props.fieldKey + '_annotations']),
+            annotations => {
+                // modify how d3 renders so that anything in this annotations list would be potentially highlighted in some way
+                // could be blue colored to make it look like anchor
+                // this.drawAnnotations()
+                // loop through annotations and draw them
+                annotations.forEach(a => this.drawAnnotations(Number(a.x), Number(a.y)));
+                // this.drawAnnotations(annotations.x, annotations.y);
+            },
+            { fireImmediately: true }
+        );
+        this._disposers.highlights = reaction(
+            () => ({
+                selected: this._currSelected,
+                incomingSelected: this.incomingSelected,
+            }),
+            ({ selected, incomingSelected }) => {
+                // redraw annotations when the chart data has changed, or the local or inherited selection has changed
+                this.clearAnnotations();
+                selected && this.drawAnnotations(Number(selected.x), Number(selected.y), true);
+                incomingSelected?.forEach((pair: any) => 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
+
+    clearAnnotations = () => {
+        const elements = document.querySelectorAll('.datapoint');
+        for (let i = 0; i < elements.length; i++) {
+            const element = elements[i];
+            element.classList.remove('brushed');
+            element.classList.remove('selected');
+        }
+    };
+    // gets called whenever the "data_annotations" fields gets updated
+    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
+        // if it doesn't exist, then remove the highlight
+        const elements = document.querySelectorAll('.datapoint');
+        for (let i = 0; i < elements.length; i++) {
+            const element = elements[i];
+            const x = element.getAttribute('data-x');
+            const y = element.getAttribute('data-y');
+            if (x === dataX.toString() && y === dataY.toString()) {
+                element.classList.add(selected ? 'selected' : 'brushed');
+            }
+            // TODO: nda - this remove highlight code should go where we remove the links
+            // } else {
+            // }
+        }
+    };
+
+    removeAnnotations(dataX: number, dataY: number) {
+        // loop through and remove any annotations that no longer exist
+    }
+
+    @action
+    restoreView = (data: Doc) => {
+        const coords = Cast(data.presDataVizSelection, listSpec('number'), null);
+        if (coords?.length > 1 && (this._currSelected?.x !== coords[0] || this._currSelected?.y !== coords[1])) {
+            this.setCurrSelected(coords[0], coords[1]);
+            return true;
+        }
+        if (this._currSelected) {
+            this.setCurrSelected();
+            return true;
+        }
+        return false;
+    };
+
+    // create a document anchor that stores whatever is needed to reconstruct the viewing state (selection,zoom,etc)
+    getAnchor = (pinProps?: PinProps) => {
+        const anchor = Docs.Create.ConfigDocument({
+            //
+            title: 'line doc selection' + this._currSelected?.x,
+        });
+        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;
+    };
+
+    @computed get height() {
+        return this.props.height - this.props.margin.top - this.props.margin.bottom;
+    }
+
+    @computed get width() {
+        return this.props.width - this.props.margin.left - this.props.margin.right;
+    }
+
+    setupTooltip() {
+        return d3
+            .select(this._piechartRef.current)
+            .append('div')
+            .attr('class', 'tooltip')
+            .style('opacity', 0)
+            .style('background', '#fff')
+            .style('border', '1px solid #ccc')
+            .style('padding', '5px')
+            .style('position', 'absolute')
+            .style('font-size', '12px');
+    }
+
+    // TODO: nda - use this everyewhere we update currSelected?
+    @action
+    setCurrSelected(x?: number, y?: number) {
+        // TODO: nda - get rid of svg element in the list?
+        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));
+    }
+
+    data = (dataSet: any) => {
+        var validData = dataSet.filter((d: { [x: string]: unknown; }) => {
+            var valid = true;
+            Object.keys(dataSet[0]).map(key => {
+                if (!d[key] || Number.isNaN(d[key])) valid = false;
+            })
+            return valid;
+        })
+        var field = Object.keys(dataSet[0])[0]
+        const data = validData.map((d: { [x: string]: any; }) => {
+            if (this.numericalData) { return +d[field].replace(/\$/g, '').replace(/\%/g, '') }
+            return d[field]
+        })
+        return data;
+    }
+
+    drawChart = (dataSet: any, width: number, height: number) => {
+        d3.select(this._piechartRef.current).select('svg').remove();
+        d3.select(this._piechartRef.current).select('.tooltip').remove();
+        
+        var radius = Math.min(width, height) / 2 - Math.max(this.props.margin.top, this.props.margin.bottom, this.props.margin.left, this.props.margin.right)
+        var svg = (this._piechartSvg = d3
+            .select(this._piechartRef.current)
+            .append("svg")
+                .attr("class", "graph")
+                .attr("width", width + this.props.margin.right + this.props.margin.left)
+                .attr("height", height + this.props.margin.top + this.props.margin.bottom)
+            .append("g"));
+    
+        let g = svg.append("g")
+            .attr("transform",
+                    "translate(" + (width/2 + this.props.margin.left) + "," + height/2 + ")");
+
+        var data = this.data(this._piechartData);
+        var pie = d3.pie();
+        var arc = d3.arc()
+            .innerRadius(0)
+            .outerRadius(radius);
+
+        //Generate groups
+        var percentField = Object.keys(dataSet[0])[0]
+        var descriptionField = Object.keys(dataSet[0])[1]
+        var arcs = g.selectAll("arc")
+            .data(pie(data))
+            .enter()
+            .append("g")
+        arcs.append("path")
+            .attr("fill", (data, i)=>{
+                let value=data.data;
+                return d3.schemeSet3[i];
+            })
+            .attr("d", arc);
+        arcs.append("text")
+            .attr("transform",function(d){ return "translate("+ (arc.centroid(d))  + ")"; })
+            .attr("text-anchor", "middle")
+            .text(function(d){ return dataSet[data.indexOf(d.value)][percentField] + ' ' + dataSet[data.indexOf(d.value)][descriptionField]})
+
+    };
+
+    render() {
+        
+        return (
+            this.props.axes.length >= 1 ? (
+            <div ref={this._piechartRef} className="chart-container">
+                <span> {`Selected: ${Object.keys(this._piechartData[0])[0]}`}</span>
+            </div>
+            ) : <span className="chart-container"> {'first use table view to select an axis to plot'}</span>
+        );
+    }
+
+}
\ No newline at end of file