Merge pull request #1490 from carbon-design-system/simple-zoombar

feat(zoombar): enable simple slider view

package.json

@@ -113,8 +113,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.10.2",
-    "@carbon/charts": "^0.34.9",
-    "@carbon/charts-react": "^0.34.9",
+    "@carbon/charts": "^0.34.10",
+    "@carbon/charts-react": "^0.34.10",
     "@carbon/colors": "10.8.0",
     "@carbon/icons-react": "10.11.0",
     "@carbon/layout": "10.7.1",

src/components/BarChartCard/BarChartCard.jsx

@@ -192,6 +192,7 @@ const BarChartCard = ({
                       top: {
                         enabled: zoomBar.enabled,
                         initialZoomDomain: zoomBar.initialZoomDomain,
+                        type: zoomBar.view || 'slider_view', // default to slider view
                       },
                     },
                   }

src/components/BarChartCard/BarChartCard.story.jsx

@@ -375,7 +375,7 @@ storiesOf('Watson IoT/BarChartCard', module)
             zoomBar: {
               enabled: true,
               axes: 'top',
-              // initialZoomDomain: []
+              view: select('view', ['slider_view', 'graph_view'], 'slider_view'),
             },
           })}
           values={barChartData.timestamps}

src/components/TimeSeriesCard/TimeSeriesCard.jsx

@@ -15,7 +15,7 @@ import capitalize from 'lodash/capitalize';
 import useDeepCompareEffect from 'use-deep-compare-effect';
 
 import { csvDownloadHandler } from '../../utils/componentUtilityFunctions';
-import { CardPropTypes } from '../../constants/CardPropTypes';
+import { CardPropTypes, ZoomBarPropTypes } from '../../constants/CardPropTypes';
 import {
   CARD_SIZES,
   TIME_SERIES_TYPES,
@@ -74,17 +74,7 @@ const TimeSeriesCardPropTypes = {
     /** optional units to put in the legend */
     unit: PropTypes.string,
     /** Optionally addes a zoom bar to the chart */
-    zoomBar: PropTypes.shape({
-      /** Determines which axis to put the zoomBar */
-      axes: PropTypes.oneOf(['top']), // top is the only axes supported right now
-      // axes: PropTypes.oneOf(['top', 'bottom', 'left', 'right']), // TODO: When the other axes are supported, swap to this proptype
-      /** Determines whether the zoomBar is enabled */
-      enabled: PropTypes.bool,
-      /** Optional domain to zoom to by default. Can be a timestamp or date string */
-      initialZoomDomain: PropTypes.arrayOf(
-        PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-      ),
-    }),
+    zoomBar: ZoomBarPropTypes,
   }).isRequired,
   i18n: PropTypes.shape({
     alertDetected: PropTypes.string,
@@ -554,6 +544,7 @@ const TimeSeriesCard = ({
                         top: {
                           enabled: zoomBar.enabled,
                           initialZoomDomain: zoomBar.initialZoomDomain,
+                          type: zoomBar.view || 'slider_view', // default to slider view
                         },
                       },
                     }

src/components/TimeSeriesCard/TimeSeriesCard.story.jsx

@@ -683,7 +683,7 @@ storiesOf('Watson IoT/TimeSeriesCard', module)
             zoomBar: {
               enabled: true,
               axes: 'top',
-              // initialZoomDomain: []
+              view: 'slider_view',
             },
           })}
           values={getIntervalChartData('month', 24, { min: 10, max: 100 }, 100)}

src/constants/CardPropTypes.js

@@ -159,6 +159,20 @@ export const TableCardPropTypes = {
   ),
 };
 
+/** Optionally addes a zoom bar to the chart */
+export const ZoomBarPropTypes = PropTypes.shape({
+  /** Determines which axis to put the zoomBar */
+  axes: PropTypes.oneOf(['top']), // top is the only axes supported right now
+  // axes: PropTypes.oneOf(['top', 'bottom', 'left', 'right']), // TODO: When the other axes are supported, swap to this proptype
+  /** Determines whether the zoomBar is enabled */
+  enabled: PropTypes.bool,
+  /** Optional domain to zoom to by default. Can be a timestamp or date string */
+  initialZoomDomain: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
+  /** How the zoomBar will display. Graph view shows a graphical interpretation of the chart data.
+   * Slider view is a simple slider with no graphical interpretation */
+  view: PropTypes.oneOf(['graph_view', 'slider_view']),
+});
+
 /** This dataset only supports one data attribute at a time */
 const BarChartDatasetPropType = {
   /** data attribute that will be displayed as bar height y-axis value */
@@ -264,17 +278,7 @@ export const BarChartCardPropTypes = {
     /** optional units to put in the legend for all datasets */
     unit: PropTypes.string,
     /** Optionally addes a zoom bar to the chart */
-    zoomBar: PropTypes.shape({
-      /** Determines which axis to put the zoomBar */
-      axes: PropTypes.oneOf(['top']), // top is the only axes supported right now
-      // axes: PropTypes.oneOf(['top', 'bottom', 'left', 'right']), // TODO: When the other axes are supported, swap to this proptype
-      /** Determines whether the zoomBar is enabled */
-      enabled: PropTypes.bool,
-      /** Optional domain to zoom to by default. Can be a timestamp or date string */
-      initialZoomDomain: PropTypes.arrayOf(
-        PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-      ),
-    }),
+    zoomBar: ZoomBarPropTypes,
   }).isRequired,
   /** array of data from the backend for instance [{quarter: '2020-Q1', city: 'Amsterdam', particles: 44700}, ...] */
   values: PropTypes.arrayOf(PropTypes.object),

src/utils/__tests__/__snapshots__/publicAPI.test.js.snap

@@ -4458,6 +4458,15 @@ Map {
                     ],
                     "type": "arrayOf",
                   },
+                  "view": Object {
+                    "args": Array [
+                      Array [
+                        "graph_view",
+                        "slider_view",
+                      ],
+                    ],
+                    "type": "oneOf",
+                  },
                 },
               ],
               "type": "shape",
@@ -9296,6 +9305,15 @@ Map {
                     ],
                     "type": "arrayOf",
                   },
+                  "view": Object {
+                    "args": Array [
+                      Array [
+                        "graph_view",
+                        "slider_view",
+                      ],
+                    ],
+                    "type": "oneOf",
+                  },
                 },
               ],
               "type": "shape",

yarn.lock

@@ -2513,17 +2513,17 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@carbon/charts-react@^0.34.9":
-  version "0.34.9"
-  resolved "https://registry.yarnpkg.com/@carbon/charts-react/-/charts-react-0.34.9.tgz#0700211363aeed2beef99038d36246ea3d8606df"
-  integrity sha512-adi5tvQsj07N9Zp3NcBDgE43L2P4XmcBKhEkXtc0zMNPrPy4jSUboMg/l93GLNAMNRAEsOTPdgQHBnSYbRZg3Q==
+"@carbon/charts-react@^0.34.10":
+  version "0.34.10"
+  resolved "https://registry.yarnpkg.com/@carbon/charts-react/-/charts-react-0.34.10.tgz#eb22b902a8138115b33dbdd18cfe0f48e1f6cd2d"
+  integrity sha512-W5FS3ulxAZmVxipVIUyNMYJeatPZwi4tMIZcPwLVMdHKlJyW+a4AmK68iSU6a4tM+UyCEdyMpPs4Xv0i67U0pw==
   dependencies:
-    "@carbon/charts" "^0.34.9"
+    "@carbon/charts" "^0.34.10"
 
-"@carbon/charts@^0.34.9":
-  version "0.34.9"
-  resolved "https://registry.yarnpkg.com/@carbon/charts/-/charts-0.34.9.tgz#a244520952fb10eeefec25ea3f2066a11af56ea2"
-  integrity sha512-HGZhTha7xeCUPvcpwFiE6LWmRWpmIn6rc76+fh/SBDRK4upVjVR2KmlIPDhoR1pxRVhON3dG29hsKOeEAdR7gw==
+"@carbon/charts@^0.34.10":
+  version "0.34.10"
+  resolved "https://registry.yarnpkg.com/@carbon/charts/-/charts-0.34.10.tgz#7e75df6ab3ab1331219c137a0f8b30fbae798fc0"
+  integrity sha512-r86KOqcYQtGueGRoMH84LVlCQUB0ZyMrDG512Zo58KnENOvzS+q/66/tGBsvj7h4hkv/dK2sV70e3Mmz7xejHA==
   dependencies:
     "@carbon/colors" "10.4.0"
     "@carbon/utils-position" "1.1.1"