Merge branch 'master' into data-visualization-sarah

5 files changed, 113 insertions, 32 deletions

diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index edb1665f2..1d8ab8f2a 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -415,8 +415,8 @@ export class Histogram extends React.Component<HistogramProps> {
 
     updateBarColors = () => {
         var svg = this._histogramSvg;
-        if (svg) svg.selectAll('rect')
-            .attr('fill', (d: any) => {
+        if (svg)
+            svg.selectAll('rect').attr('fill', (d: any) => {
                 var barColor;
                 const barColors = StrListCast(this.props.layoutDoc.dataViz_histogram_barColors).map(each => each.split('::'));
                 barColors.forEach(each => {
@@ -428,7 +428,7 @@ export class Histogram extends React.Component<HistogramProps> {
                 });
                 return barColor ? StrCast(barColor) : StrCast(this.props.layoutDoc.dataViz_histogram_defaultColor);
             });
-    }
+    };
 
     render() {
         this.updateBarColors();
diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
index 206169c13..8967f27b8 100644
--- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
@@ -76,7 +76,7 @@ export class LineChart extends React.Component<LineChartProps> {
         // return selected x and y axes
         // otherwise, use the selection of whatever is linked to us
         const incomingVizBox = DocumentManager.Instance.getFirstDocumentView(this.parentViz)?.ComponentView as DataVizBox;
-        const highlitedRowIds = (incomingVizBox && incomingVizBox.rootDoc)? NumListCast(incomingVizBox.rootDoc.dataViz_highlitedRows) : [];
+        const highlitedRowIds = incomingVizBox && incomingVizBox.rootDoc ? NumListCast(incomingVizBox.rootDoc.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
     }
     @computed get rangeVals(): { xMin?: number; xMax?: number; yMin?: number; yMax?: number } {
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index 8be8b7c7c..de6263198 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -52,7 +52,7 @@ export class PieChart extends React.Component<PieChartProps> {
     // organized by specified number percentages/ratios if one column is selected and it contains numbers
     // otherwise, assume data is organized by categories
     @computed get byCategory() {
-        return !/\d/.test(this.props.records[0][this.props.axes[0]]);
+        return this.props.axes.length === 1 || !/\d/.test(this.props.records[0][this.props.axes[0]]);
     }
     // filters all data to just display selected data if brushed (created from an incoming link)
     @computed get _pieChartData() {
@@ -265,7 +265,7 @@ export class PieChart extends React.Component<PieChartProps> {
                 var sliceColor;
                 if (dataPoint) {
                     const sliceTitle = dataPoint[this.props.axes[0]];
-                    const accessByName = StrCast(sliceTitle)? StrCast(sliceTitle).replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '') : sliceTitle;
+                    const accessByName = StrCast(sliceTitle) ? StrCast(sliceTitle).replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '') : sliceTitle;
                     var sliceColors = StrListCast(this.props.layoutDoc.dataViz_pie_sliceColors).map(each => each.split('::'));
                     sliceColors.forEach(each => each[0] == accessByName && (sliceColor = each[1]));
                 }
@@ -289,35 +289,31 @@ export class PieChart extends React.Component<PieChartProps> {
         // adding labels
         trackDuplicates = {};
         data.forEach((eachData: any) => (!trackDuplicates[eachData] ? (trackDuplicates[eachData] = 0) : null));
-        arcs.append('text')
-            .attr('transform', function (d) {
-                var centroid = arc.centroid(d as unknown as d3.DefaultArcObject);
-                var heightOffset = (centroid[1] / radius) * Math.abs(centroid[1]);
-                return 'translate(' + (centroid[0] + centroid[0] / (radius * 0.02)) + ',' + (centroid[1] + heightOffset) + ')';
-            })
-            .attr('text-anchor', 'middle')
-            .text(function (d) {
-                var possibleDataPoints = pieDataSet.filter((each: { [x: string]: any | { valueOf(): number } }) => {
-                    try {
-                        return Number(each[percentField].replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '')) == Number(d.data);
-                    } catch (error) {
-                        return each[percentField] == d.data;
+        arcs.size() < 100 &&
+            arcs
+                .append('text')
+                .attr('transform', function (d) {
+                    var centroid = arc.centroid(d as unknown as d3.DefaultArcObject);
+                    var heightOffset = (centroid[1] / radius) * Math.abs(centroid[1]);
+                    return 'translate(' + (centroid[0] + centroid[0] / (radius * 0.02)) + ',' + (centroid[1] + heightOffset) + ')';
+                })
+                .attr('text-anchor', 'middle')
+                .text(function (d) {
+                    var dataPoint;
+                    const possibleDataPoints = possibleDataPointVals.filter((pval: any) => pval[percentField] === Number(d.data));
+                    if (possibleDataPoints.length == 1) dataPoint = possibleDataPoints[0];
+                    else {
+                        dataPoint = possibleDataPoints[trackDuplicates[d.data.toString()]];
+                        trackDuplicates[d.data.toString()] = trackDuplicates[d.data.toString()] + 1;
                     }
+                    return dataPoint ? dataPoint[percentField]! + (!descriptionField ? '' : ' - ' + dataPoint[descriptionField])! : '';
                 });
-                var dataPoint;
-                if (possibleDataPoints.length == 1) dataPoint = possibleDataPoints[0];
-                else {
-                    dataPoint = possibleDataPoints[trackDuplicates[d.data.toString()]];
-                    trackDuplicates[d.data.toString()] = trackDuplicates[d.data.toString()] + 1;
-                }
-                return dataPoint ? dataPoint[percentField]! + (!descriptionField ? '' : ' - ' + dataPoint[descriptionField])! : '';
-            });
     };
 
     @action changeSelectedColor = (color: string) => {
         this.curSliceSelected.attr('fill', color);
         const sliceTitle = this._currSelected[this.props.axes[0]];
-        const sliceName = StrCast(sliceTitle)? StrCast(sliceTitle).replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '') : sliceTitle;
+        const sliceName = StrCast(sliceTitle) ? StrCast(sliceTitle).replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '') : sliceTitle;
 
         const sliceColors = Cast(this.props.layoutDoc.dataViz_pie_sliceColors, listSpec('string'), null);
         sliceColors.map(each => {
@@ -336,7 +332,7 @@ export class PieChart extends React.Component<PieChartProps> {
         var curSelectedSliceName = '';
         if (this._currSelected) {
             const sliceTitle = this._currSelected[this.props.axes[0]];
-            curSelectedSliceName = StrCast(sliceTitle)? StrCast(sliceTitle).replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '') : sliceTitle;
+            curSelectedSliceName = StrCast(sliceTitle) ? StrCast(sliceTitle).replace(/\$/g, '').replace(/\%/g, '').replace(/\</g, '') : sliceTitle;
             selected = '{ ';
             Object.keys(this._currSelected).map(key => {
                 key != '' ? (selected += key + ': ' + this._currSelected[key] + ', ') : '';
@@ -346,7 +342,9 @@ export class PieChart extends React.Component<PieChartProps> {
         } else selected = 'none';
         var selectedSliceColor;
         var sliceColors = StrListCast(this.props.layoutDoc.dataViz_pie_sliceColors).map(each => each.split('::'));
-        sliceColors.forEach(each => { if (each[0] == curSelectedSliceName!) selectedSliceColor = each[1] });
+        sliceColors.forEach(each => {
+            if (each[0] == curSelectedSliceName!) selectedSliceColor = each[1];
+        });
 
         if (this._pieChartData.length > 0 || !this.parentViz) {
             return this.props.axes.length >= 1 ? (
diff --git a/src/client/views/nodes/FontIconBox/FontIconBox.tsx b/src/client/views/nodes/FontIconBox/FontIconBox.tsx
index 47dac651d..225df555b 100644
--- a/src/client/views/nodes/FontIconBox/FontIconBox.tsx
+++ b/src/client/views/nodes/FontIconBox/FontIconBox.tsx
@@ -21,6 +21,7 @@ import { OpenWhere } from '../DocumentView';
 import { FieldView, FieldViewProps } from '../FieldView';
 import { RichTextMenu } from '../formattedText/RichTextMenu';
 import './FontIconBox.scss';
+import TrailsIcon from './TrailsIcon';
 
 export enum ButtonType {
     TextButton = 'textBtn',
@@ -92,8 +93,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
             else return null;
         }
         icon = StrCast(this.dataDoc[this.fieldKey ?? 'icon'] ?? this.dataDoc.icon, 'user') as any;
-        const trailsIcon = () => <img src={`/assets/${'presTrails.png'}`} style={{ width: 30, height: 30, filter: `invert(${color === Colors.DARK_GRAY ? '0%' : '100%'})` }} />;
-        return !icon ? null : icon === 'pres-trail' ? trailsIcon() : <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={icon} color={color} />;
+        return !icon ? null : icon === 'pres-trail' ? <TrailsIcon /> : <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={icon} color={color} />;
     };
     @computed get dropdown() {
         return BoolCast(this.rootDoc.dropDownOpen);
diff --git a/src/client/views/nodes/FontIconBox/TrailsIcon.tsx b/src/client/views/nodes/FontIconBox/TrailsIcon.tsx
new file mode 100644
index 000000000..99063b4a0
--- /dev/null
+++ b/src/client/views/nodes/FontIconBox/TrailsIcon.tsx
@@ -0,0 +1,83 @@
+import * as React from 'react';
+import { StrCast } from '../../../../fields/Types';
+import { Doc } from '../../../../fields/Doc';
+
+const TrailsIcon = () => (
+    <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 1080.000000 1080.000000" preserveAspectRatio="xMidYMid meet">
+        <g transform="translate(0.000000,1080.000000) scale(0.100000,-0.100000)" fill={StrCast(Doc.UserDoc().userColor)} stroke="none">
+            <path
+                d="M665 9253 c-74 -10 -157 -38 -240 -81 -74 -37 -107 -63 -186 -141
+-104 -104 -156 -191 -201 -334 l-23 -72 0 -3215 c0 -3072 1 -3218 18 -3280 10
+-36 39 -108 64 -160 40 -82 59 -107 142 -190 81 -81 111 -103 191 -143 52 -26
+122 -55 155 -65 57 -16 322 -17 4775 -20 3250 -2 4736 1 4784 8 256 39 486
+220 588 462 63 148 59 -96 56 3413 -3 3049 -4 3203 -21 3260 -78 260 -285 467
+-542 542 -57 17 -308 18 -4795 19 -2604 1 -4748 -1 -4765 -3z m9187 -787 c65
+-19 114 -60 143 -120 l25 -51 0 -2898 c0 -2582 -2 -2901 -15 -2934 -24 -57
+-62 -101 -108 -126 l-42 -22 -4435 -3 c-3954 -2 -4440 0 -4481 13 -26 9 -63
+33 -87 56 -79 79 -72 -205 -72 3012 0 2156 3 2889 12 2918 20 70 91 136 168
+160 14 4 2010 8 4436 8 3710 1 4418 -1 4456 -13z"
+            />
+            <path
+                d="M7692 7839 c-46 -14 -109 -80 -122 -128 -7 -27 -9 -472 -8 -1443 l3
+-1403 24 -38 c13 -21 42 -50 64 -65 l41 -27 816 0 816 0 41 27 c22 15 51 44
+64 65 l24 38 0 1425 0 1425 -24 38 c-13 21 -42 50 -64 65 l-41 27 -800 2
+c-488 1 -814 -2 -834 -8z"
+            />
+            <path
+                d="M1982 7699 c-46 -14 -109 -80 -122 -128 -7 -27 -10 -308 -8 -893 l3
+-853 24 -38 c13 -21 42 -50 64 -65 l41 -27 1386 0 1386 0 41 27 c22 15 51 44
+64 65 l24 38 0 876 0 875 -27 41 c-15 22 -44 51 -65 64 l-38 24 -1370 2 c-847
+1 -1383 -2 -1403 -8z"
+            />
+            <path
+                d="M6413 7093 c-13 -2 -23 -9 -23 -15 0 -24 21 -307 26 -343 l5 -40 182
+-1 c200 -1 307 -15 484 -65 57 -16 107 -29 112 -29 5 0 36 75 69 168 33 92 63
+175 67 184 6 14 -10 22 -92 48 -126 39 -308 76 -447 89 -106 11 -337 13 -383
+4z"
+            />
+            <path
+                d="M5840 7033 c-63 -8 -238 -29 -388 -47 -150 -18 -274 -35 -276 -37 -2
+-2 8 -89 23 -194 22 -163 29 -190 44 -193 10 -2 91 6 180 17 89 12 258 32 376
+46 118 14 216 27 218 28 7 8 -43 391 -52 392 -5 1 -62 -4 -125 -12z"
+            />
+            <path
+                d="M4762 4789 c-46 -14 -109 -80 -122 -128 -7 -27 -10 -323 -8 -943 l3
+-903 24 -38 c13 -21 42 -50 64 -65 l41 -27 926 0 926 0 41 27 c22 15 51 44 64
+65 l24 38 0 926 0 925 -27 41 c-15 22 -44 51 -65 64 l-38 24 -910 2 c-557 1
+-923 -2 -943 -8z"
+            />
+            <path
+                d="M8487 4297 c-26 -215 -161 -474 -307 -585 -27 -20 -49 -40 -49 -44
+-1 -3 49 -79 110 -167 l110 -161 44 31 c176 126 333 350 418 594 30 86 77 282
+77 320 0 8 -57 19 -167 34 -93 13 -182 25 -199 28 -31 5 -31 5 -37 -50z"
+            />
+            <path
+                d="M3965 4233 c-106 -9 -348 -36 -415 -47 -55 -8 -75 -15 -74 -26 1 -20
+56 -374 59 -377 1 -2 46 4 101 12 159 24 409 45 526 45 l108 0 0 200 0 200
+-132 -2 c-73 -1 -151 -3 -173 -5z"
+            />
+            <path
+                d="M3020 4079 c-85 -23 -292 -94 -368 -125 -97 -40 -298 -140 -305 -151
+-5 -7 172 -315 192 -336 4 -4 41 10 82 32 103 55 272 123 414 165 66 20 125
+38 132 41 11 4 -4 70 -78 348 -10 39 -14 41 -69 26z"
+            />
+            <path
+                d="M6955 3538 c-21 -91 -74 -362 -72 -364 7 -7 260 -44 367 -54 146 -13
+359 -13 475 0 49 6 90 12 91 13 2 1 -12 90 -29 197 -26 155 -36 194 -47 192
+-8 -2 -85 -6 -170 -9 -160 -6 -357 7 -505 33 -103 18 -104 18 -110 -8z"
+            />
+            <path
+                d="M1993 3513 c-52 -67 -71 -106 -98 -198 -35 -122 -44 -284 -21 -415 9
+-51 18 -96 21 -98 4 -5 360 79 375 88 7 4 7 24 0 60 -21 109 -7 244 31 307
+l20 31 -146 131 c-80 72 -147 131 -149 131 -2 0 -17 -17 -33 -37z"
+            />
+            <path
+                d="M2210 2519 c-91 -50 -166 -92 -168 -94 -2 -1 11 -26 28 -54 l32 -51
+244 0 c134 0 244 2 244 5 0 3 -23 33 -51 67 -28 35 -72 98 -97 140 -26 43 -51
+77 -57 77 -5 0 -84 -41 -175 -90z"
+            />
+        </g>
+    </svg>
+);
+
+export default TrailsIcon;