Feature/2101 - Visualize well data in bar charts

* Remove interpolation from plots
inowas · Nov 16, 2021 · 1f37001 · 1f37001
1 parent ccf25a8
commit 1f37001
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 32 deletions.
diff --git a/src/scenes/modflow/defaults/colorScales.ts b/src/scenes/modflow/defaults/colorScales.ts
@@ -1,38 +1,38 @@
 export const misc = [
-    '#393b89',
-    '#5254a3',
-    '#6b6ecf',
-    '#9c9ede',
-    '#637939',
-    '#8ca252',
-    '#b5cf6b',
-    '#cedb9c',
-    '#8c6d31',
-    '#bd9e39',
-    '#e7ba52',
-    '#e7cb94',
-    '#843c39',
-    '#ad494a',
-    '#d6616b',
-    '#e7969c',
-    '#7b4173',
-    '#a55194',
-    '#ce6dbd',
-    '#de9ed6',
-    '#222222',
-    '#444444',
-    '#666666',
-    '#888888',
-    '#aaaaaa',
-    '#cccccc'
+  '#393b89',
+  '#5254a3',
+  '#6b6ecf',
+  '#9c9ede',
+  '#637939',
+  '#8ca252',
+  '#b5cf6b',
+  '#cedb9c',
+  '#8c6d31',
+  '#bd9e39',
+  '#e7ba52',
+  '#e7cb94',
+  '#843c39',
+  '#ad494a',
+  '#d6616b',
+  '#e7969c',
+  '#7b4173',
+  '#a55194',
+  '#ce6dbd',
+  '#de9ed6',
+  '#222222',
+  '#444444',
+  '#666666',
+  '#888888',
+  '#aaaaaa',
+  '#cccccc',
 ];
 
 export const distinct = [
   '#e6194b',
   '#3cb44b',
-  '#ffe119',
   '#4363d8',
   '#f58231',
+  '#ffe119',
   '#911eb4',
   '#46f0f0',
   '#f032e6',
@@ -49,6 +49,5 @@ export const distinct = [
   '#000075',
   '#808080',
   '#ffffff',
-  '#000000'
+  '#000000',
 ];
-
diff --git a/src/scenes/t03/components/content/boundaries/boundaryDateTimeValuesChart.tsx b/src/scenes/t03/components/content/boundaries/boundaryDateTimeValuesChart.tsx
@@ -10,6 +10,7 @@ import {
   ReferenceLine,
   ResponsiveContainer,
   Tooltip,
+  TooltipFormatter,
   XAxis,
   YAxis,
 } from 'recharts';
@@ -68,6 +69,14 @@ const BoundaryDateTimeValuesChart = (props: IProps) => {
     ).format(user.settings.dateFormat);
   };
 
+  const tooltipFormatter: TooltipFormatter = (value, name) => {
+    const p = properties.filter((prop) => prop.name === name);
+    if (p.length > 0) {
+      return `${value} ${p[0].unit}`;
+    }
+    return `${value} ${name}`;
+  };
+
   if (props.boundary instanceof WellBoundary) {
     return (
       <ResponsiveContainer aspect={1.5}>
@@ -80,7 +89,7 @@ const BoundaryDateTimeValuesChart = (props: IProps) => {
           <CartesianGrid strokeDasharray="3 3" />
           <Legend iconType="plainline" iconSize={30} verticalAlign="bottom" wrapperStyle={{ bottom: -10, left: 0 }} />
           <ReferenceLine y={0} yAxisId="left" stroke="#000" />
-          <Tooltip labelFormatter={labelFormatter} />
+          <Tooltip labelFormatter={labelFormatter} formatter={tooltipFormatter} />
           {properties.map((p, k) => (
             <Bar
               key={md5(p.name + k)}
@@ -104,11 +113,11 @@ const BoundaryDateTimeValuesChart = (props: IProps) => {
         )}
         <CartesianGrid strokeDasharray="3 3" />
         <Legend iconType="plainline" iconSize={30} verticalAlign="bottom" wrapperStyle={{ bottom: -10, left: 0 }} />
-        <Tooltip labelFormatter={labelFormatter} />
+        <Tooltip labelFormatter={labelFormatter} formatter={tooltipFormatter} />
         {properties.map((p, k) => (
           <Line
             key={md5(p.name + k)}
-            type="monotone"
+            type="linear"
             dataKey={p.name}
             dot={false}
             stroke={distinct[k]}