Merge pull request #44 from brown-ccv/fix-heat-variable

fix: add variable label to heatmap
brown-ccv · Oct 29, 2020 · a5b2ea9 · a5b2ea9
2 parents 36e20e5 + f7034e0
commit a5b2ea9
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 2 deletions.
diff --git a/src/components/d-chart-heatmap.vue b/src/components/d-chart-heatmap.vue
@@ -8,6 +8,10 @@ export default {
       type: String,
       required: true,
     },
+    variableLabel: {
+      type: String,
+      required: true,
+    },
     x: {
       type: String,
       required: true,
@@ -74,7 +78,7 @@ export default {
         ],
         legends: [
           {
-            title: this.variable,
+            title: this.variableLabel,
             fill: 'color',
             type: 'gradient',
             gradientLength: { signal: 'height' },
@@ -91,7 +95,7 @@ export default {
                 width: { scale: 'x', band: 1 },
                 height: { scale: 'y', band: 1 },
                 tooltip: {
-                  signal: `{'${this.xLabel}': datum.${this.x}, '${this.yLabel}': datum.${this.y}, 'Count': datum.${this.variable}}`,
+                  signal: `{'${this.xLabel}': datum.${this.x}, '${this.yLabel}': datum.${this.y}, '${this.variableLabel}': datum.${this.variable}}`,
                 },
               },
               update: {

diff --git a/src/stories/chart-container.stories.mdx b/src/stories/chart-container.stories.mdx
@@ -66,6 +66,7 @@ export const ChartContainerTemplate = (args, { argTypes }) => ({
               y="station"
               y-label="Buoy ID"
               variable="temp"
+              variable-label="Temp. (C)"
             />
           </template>
         </DChartContainer>

diff --git a/src/stories/heatmap.stories.mdx b/src/stories/heatmap.stories.mdx
@@ -33,6 +33,7 @@ import DHeatMap from '../components/d-chart-heatmap.vue';
   y="station"
   y-label="Buoy ID"
   :variable="variable"
+  variable-label="Temp. (C)"
   :include-actions="true"
 />
 ```
@@ -58,6 +59,7 @@ export const Template = (args, { argTypes }) => ({
               :y="y"
               :y-label="yLabel"
               :variable="variable"
+              :variable-label="variableLabel"
               :include-actions="includeActions"
               :spec-override="specOverride"
             />
@@ -69,6 +71,7 @@ export const Template = (args, { argTypes }) => ({
 <Canvas>
   <Story name="Heat Map" args={{
     variable: 'temp',
+    variableLabel: 'Temp. (C)',
     includeActions: true,
     minWidth: 400,
     height: 300,

diff --git a/tests/unit/d-chart-heatmap.spec.js b/tests/unit/d-chart-heatmap.spec.js
@@ -6,6 +6,7 @@ import ResizeObserver from '../__mocks__/ResizeObserver'; // eslint-disable-line
 let props = {
   id: 'heatmap',
   variable: 'temp',
+  variableLabel: 'Temp. (C)',
   minWidth: 400,
   height: 300,
   x: 'month',