Merge pull request #438 from inowas/feature/2097-t03-visualize-well-d…

…ata-in-bar-charts Feature/2101 - T03: Visualize well data in bar charts
inowas · Nov 16, 2021 · fd21571 · fd21571
2 parents 3a0e5ea + 1f37001
commit fd21571
Show file tree

Hide file tree

Showing 2 changed files with 69 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
@@ -1,16 +1,20 @@
-import { Boundary } from '../../../../../core/model/modflow/boundaries';
 import {
+  Bar,
+  BarChart,
   CartesianGrid,
   LabelFormatter,
   LabelProps,
   Legend,
   Line,
   LineChart,
+  ReferenceLine,
   ResponsiveContainer,
   Tooltip,
+  TooltipFormatter,
   XAxis,
   YAxis,
 } from 'recharts';
+import { Boundary, WellBoundary } from '../../../../../core/model/modflow/boundaries';
 import { IPropertyValueObject } from '../../../../../core/model/types';
 import { IRootReducer } from '../../../../../reducers';
 import { Stressperiods } from '../../../../../core/model/modflow';
@@ -65,6 +69,40 @@ 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}>
+        <BarChart data={data}>
+          <XAxis dataKey="sp" domain={['dataMin', 'dataMax']} />
+          <YAxis yAxisId="left" label={getYAxisLabel(differentUnits[0], 'left')} />
+          {differentUnits.length > 1 && (
+            <YAxis label={getYAxisLabel(differentUnits[1], 'right')} yAxisId="right" orientation="right" />
+          )}
+          <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} formatter={tooltipFormatter} />
+          {properties.map((p, k) => (
+            <Bar
+              key={md5(p.name + k)}
+              fill={distinct[k]}
+              dataKey={p.name}
+              yAxisId={p.unit === differentUnits[0] ? 'left' : 'right'}
+            />
+          ))}
+        </BarChart>
+      </ResponsiveContainer>
+    );
+  }
+
   return (
     <ResponsiveContainer aspect={1.5}>
       <LineChart data={data}>
@@ -75,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]}