Use split utils in Scatterplot

allegro · Mar 9, 2022 · da2aa82 · da2aa82
1 parent 0f54f5b
commit da2aa82
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/src/client/visualizations/scatterplot/scatterplot.tsx b/src/client/visualizations/scatterplot/scatterplot.tsx
@@ -62,7 +62,7 @@ export class Scatterplot extends React.Component<ChartProps, ScatterplotState> {
 
   render() {
     const { data, essence, stage } = this.props;
-    const splitKey = essence.splits.splits.first().toKey();
+    const mainSplit = essence.splits.splits.first();
     const showHeatmap = (essence.visualizationSettings as ScatterplotSettings).showSummary;
 
     const {
@@ -88,7 +88,7 @@ export class Scatterplot extends React.Component<ChartProps, ScatterplotState> {
         xSeries={xSeries}
         yScale={yScale}
         xScale={xScale}
-        splitKey={splitKey}
+        split={mainSplit}
         timezone={essence.timezone}
         showPrevious={essence.hasComparison()}/>
       <svg viewBox={stage.getViewBox()}>
@@ -119,7 +119,7 @@ export class Scatterplot extends React.Component<ChartProps, ScatterplotState> {
           {scatterplotData.map(datum => {
             return (
               <Point
-                key={`point-${datum[splitKey]}`}
+                key={`point-${mainSplit.selectValue(datum)}`}
                 datum={datum}
                 xScale={xScale}
                 yScale={yScale}

diff --git a/src/client/visualizations/scatterplot/tooltip.tsx b/src/client/visualizations/scatterplot/tooltip.tsx
@@ -20,16 +20,16 @@ import { ConcreteSeries } from "../../../common/models/series/concrete-series";
 import "./scatterplot.scss";
 
 import { Timezone } from "chronoshift";
+import { Split } from "../../../common/models/split/split";
 import { Stage } from "../../../common/models/stage/stage";
-import { formatValue } from "../../../common/utils/formatter/formatter";
 import { isTruthy } from "../../../common/utils/general/general";
 import { SegmentBubbleContent } from "../../components/segment-bubble/segment-bubble";
 import { SeriesBubbleContent } from "../../components/series-bubble-content/series-bubble-content";
 import { TooltipWithinStage } from "../../components/tooltip-within-stage/tooltip-within-stage";
 import { LinearScale } from "../../utils/linear-scale/linear-scale";
 
 interface TooltipProps {
-  splitKey: string;
+  split: Split;
   datum: Datum;
   stage: Stage;
   xSeries: ConcreteSeries;
@@ -50,7 +50,7 @@ export const Tooltip: React.SFC<TooltipProps> = ({
   ySeries,
   xScale,
   yScale,
-  splitKey,
+  split,
   timezone,
   showPrevious
 }) => {
@@ -61,7 +61,7 @@ export const Tooltip: React.SFC<TooltipProps> = ({
 
   return <TooltipWithinStage top={yPosition} left={xPosition} stage={stage}>
     <SegmentBubbleContent
-      title={formatValue(datum[splitKey], timezone)}
+      title={split.formatValue(datum, timezone)}
       content={<>
         <strong className="series-title">{xSeries.title()}</strong>
         <br/>