From ccf25a8142cc142c3cca1197d754271843b19ac1 Mon Sep 17 00:00:00 2001
From: Robert Schlick <robert@schlick.it>
Date: Mon, 15 Nov 2021 12:45:16 +0200
Subject: [PATCH 1/2] Feature/2101 - T03: Visualize well data in bar charts

* Add bar charts for well boundaries
---
 .../boundaryDateTimeValuesChart.tsx           | 31 ++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/scenes/t03/components/content/boundaries/boundaryDateTimeValuesChart.tsx b/src/scenes/t03/components/content/boundaries/boundaryDateTimeValuesChart.tsx
index 9a0cecc5..3f2ab037 100644
--- a/src/scenes/t03/components/content/boundaries/boundaryDateTimeValuesChart.tsx
+++ b/src/scenes/t03/components/content/boundaries/boundaryDateTimeValuesChart.tsx
@@ -1,16 +1,19 @@
-import { Boundary } from '../../../../../core/model/modflow/boundaries';
 import {
+  Bar,
+  BarChart,
   CartesianGrid,
   LabelFormatter,
   LabelProps,
   Legend,
   Line,
   LineChart,
+  ReferenceLine,
   ResponsiveContainer,
   Tooltip,
   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 +68,32 @@ const BoundaryDateTimeValuesChart = (props: IProps) => {
     ).format(user.settings.dateFormat);
   };
 
+  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} />
+          {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}>

From 1f37001020d208640592487b97dcb5c1dc39c255 Mon Sep 17 00:00:00 2001
From: Robert Schlick <robert@schlick.it>
Date: Tue, 16 Nov 2021 12:46:10 +0200
Subject: [PATCH 2/2] Feature/2101 - Visualize well data in bar charts

* Remove interpolation from plots
---
 src/scenes/modflow/defaults/colorScales.ts    | 57 +++++++++----------
 .../boundaryDateTimeValuesChart.tsx           | 15 ++++-
 2 files changed, 40 insertions(+), 32 deletions(-)

diff --git a/src/scenes/modflow/defaults/colorScales.ts b/src/scenes/modflow/defaults/colorScales.ts
index 64c231a4..d2cbcb1c 100644
--- 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
index 3f2ab037..8cd0af31 100644
--- 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]}