From 6dbb37c0565c3f2a9ab51f00c69080952c66f616 Mon Sep 17 00:00:00 2001 From: Taylor Jones Date: Tue, 10 Nov 2020 19:48:29 -0600 Subject: [PATCH 01/23] fix(table): prevent comparison of props of type element/node --- src/components/Table/StatefulTable.jsx | 35 ++++++++++++++++++++++++-- src/components/Table/Table.jsx | 33 +++++++++++++++++++++++- 2 files changed, 65 insertions(+), 3 deletions(-) diff --git a/src/components/Table/StatefulTable.jsx b/src/components/Table/StatefulTable.jsx index e805d3de28..06ea59ee69 100644 --- a/src/components/Table/StatefulTable.jsx +++ b/src/components/Table/StatefulTable.jsx @@ -62,7 +62,7 @@ const StatefulTable = ({ data: initialData, expandedData, ...other }) => { const { pagination, toolbar, table, onUserViewModified } = callbackActions; - // Need to initially sort and filter the tables data, but preserve the selectedId + // Need to initially sort and filter the tables data, but preserve the selectedId. useDeepCompareEffect(() => { dispatch( tableRegister({ @@ -73,7 +73,38 @@ const StatefulTable = ({ data: initialData, expandedData, ...other }) => { hasUserViewManagement, }) ); - }, [initialData, isLoading, initialState]); + }, [ + // Props of type React.Element or React.Node must not be included in + // useDeepCompareEffect dependency arrays, their object signature is + // massive and will throw out of memory errors if compared. + // https://github.com/kentcdodds/use-deep-compare-effect/issues/7 + // https://twitter.com/dan_abramov/status/1104415855612432384 + initialData, + isLoading, + initialState.pagination, + initialState.filters, + initialState.toolbar.activeBar, + // Remove the icon as it's a React.Element which can not be compared + initialState.toolbar.batchActions.map((action) => { + const { icon, ...nonElements } = action; + return nonElements; + }), + initialState.toolbar.initialDefaultSearch, + initialState.toolbar.search, + initialState.toolbar.isDisabled, + initialState.table.isSelectAllSelected, + initialState.table.isSelectAllIndeterminate, + initialState.table.selectedIds, + initialState.table.sort, + initialState.table.ordering, + // Remove the error as it's a React.Element/Node which can not be compared + initialState.table.rowActions.map((action) => { + const { error, ...nonElements } = action; + return nonElements; + }), + initialState.table.expandedIds, + initialState.table.loadingState, + ]); const columns = hasUserViewManagement ? state.columns : initialColumns; const initialDefaultSearch = state?.view?.toolbar?.initialDefaultSearch || ''; diff --git a/src/components/Table/Table.jsx b/src/components/Table/Table.jsx index abd81e26bd..54c516c31b 100644 --- a/src/components/Table/Table.jsx +++ b/src/components/Table/Table.jsx @@ -380,7 +380,38 @@ const Table = (props) => { initialRendering.current = false; } } - }, [view, columns]); + }, [ + // Props of type React.Element or React.Node must not be included in + // useDeepCompareEffect dependency arrays, their object signature is + // massive and will throw out of memory errors if compared. + // https://github.com/kentcdodds/use-deep-compare-effect/issues/7 + // https://twitter.com/dan_abramov/status/1104415855612432384 + view.pagination, + view.filters, + view.toolbar.activeBar, + // Remove the icon as it's a React.Element which can not be compared + view.toolbar.batchActions.map((action) => { + const { icon, ...nonElements } = action; + return nonElements; + }), + view.toolbar.initialDefaultSearch, + view.toolbar.search, + view.toolbar.isDisabled, + view.table.isSelectAllSelected, + view.table.isSelectAllIndeterminate, + view.table.selectedIds, + view.table.sort, + view.table.ordering, + // Remove the error as it's a React.Element/Node which can not be compared + view.table.rowActions.map((action) => { + const { error, ...nonElements } = action; + return nonElements; + }), + view.table.expandedIds, + view.table.loadingState, + view.table.filteredData, + columns, + ]); const { maxPages, ...paginationProps } = view.pagination; const langDir = useLangDirection(); From 08ecee1fe1b35c33036aa269c24692cecd4dc443 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Wed, 18 Nov 2020 21:57:33 +0000 Subject: [PATCH 02/23] chore(deps-dev): bump semantic-release from 17.2.1 to 17.2.3 Bumps [semantic-release](https://github.com/semantic-release/semantic-release) from 17.2.1 to 17.2.3. - [Release notes](https://github.com/semantic-release/semantic-release/releases) - [Commits](https://github.com/semantic-release/semantic-release/compare/v17.2.1...v17.2.3) Signed-off-by: dependabot[bot] --- package.json | 2 +- yarn.lock | 73 ++++++++-------------------------------------------- 2 files changed, 12 insertions(+), 63 deletions(-) diff --git a/package.json b/package.json index e3d54cd9b3..5981b2f3d1 100644 --- a/package.json +++ b/package.json @@ -269,7 +269,7 @@ "rollup-plugin-replace": "^2.1.0", "rollup-plugin-uglify": "^6.0.4", "sass-loader": "^7.1.0", - "semantic-release": "^17.2.1", + "semantic-release": "^17.2.3", "storybook-addon-rtl": "^0.2.2", "storybook-readme": "^5.0.8", "style-loader": "^0.23.1", diff --git a/yarn.lock b/yarn.lock index a0c799a9e5..7e4662310f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7384,7 +7384,7 @@ cosmiconfig@^4.0.0: parse-json "^4.0.0" require-from-string "^2.0.1" -cosmiconfig@^5.0.0, cosmiconfig@^5.2.0, cosmiconfig@^5.2.1: +cosmiconfig@^5.0.0, cosmiconfig@^5.0.7, cosmiconfig@^5.2.0, cosmiconfig@^5.2.1: version "5.2.1" resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-5.2.1.tgz#040f726809c591e77a17c0a3626ca45b4f168b1a" dependencies: @@ -7393,15 +7393,6 @@ cosmiconfig@^5.0.0, cosmiconfig@^5.2.0, cosmiconfig@^5.2.1: js-yaml "^3.13.1" parse-json "^4.0.0" -cosmiconfig@^5.0.7: - version "5.0.7" - resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-5.0.7.tgz#39826b292ee0d78eda137dfa3173bd1c21a43b04" - dependencies: - import-fresh "^2.0.0" - is-directory "^0.3.1" - js-yaml "^3.9.0" - parse-json "^4.0.0" - cosmiconfig@^6.0.0: version "6.0.0" resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-6.0.0.tgz#da4fee853c52f6b1e6935f41c1a2fc50bd4a9982" @@ -8115,7 +8106,7 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.8, debug@^2.6. dependencies: ms "2.0.0" -debug@3.1.0, debug@=3.1.0, debug@^3.1.0: +debug@3.1.0, debug@=3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261" dependencies: @@ -8134,7 +8125,7 @@ debug@4.1.0: dependencies: ms "^2.1.1" -debug@^3.0.0, debug@^3.0.1, debug@^3.2.5, debug@^3.2.6: +debug@^3.0.0, debug@^3.0.1, debug@^3.1.0, debug@^3.2.5, debug@^3.2.6: version "3.2.6" resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b" integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ== @@ -10809,16 +10800,7 @@ hook-std@^2.0.0: resolved "https://registry.yarnpkg.com/hook-std/-/hook-std-2.0.0.tgz#ff9aafdebb6a989a354f729bb6445cf4a3a7077c" integrity sha512-zZ6T5WcuBMIUVh49iPQS9t977t7C0l7OtHrpeMb5uk48JdflRX0NSFvCekfYNmGQETnLq9W/isMyHl69kxGi8g== -hosted-git-info@^2.1.4: - version "2.7.1" - resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.7.1.tgz#97f236977bd6e125408930ff6de3eec6281ec047" - -hosted-git-info@^2.7.1: - version "2.8.5" - resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.5.tgz#759cfcf2c4d156ade59b0b2dfabddc42a6b9c70c" - integrity sha512-kssjab8CvdXfcXMXVcvsXum4Hwdq9XGtRD3TteMEvEbq0LXyiNQr6AprqKqfeaDXze7SxWvRxdpwE6ku7ikLkg== - -hosted-git-info@^2.8.8: +hosted-git-info@^2.1.4, hosted-git-info@^2.7.1, hosted-git-info@^2.8.8: version "2.8.8" resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.8.tgz#7539bd4bc1e0e0a895815a2e0262420b12858488" integrity sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg== @@ -18245,10 +18227,10 @@ select@^1.1.2: resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d" integrity sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0= -semantic-release@^17.2.1: - version "17.2.1" - resolved "https://registry.yarnpkg.com/semantic-release/-/semantic-release-17.2.1.tgz#739bad395219110cc30d1ef7029fa2e03e3b4b72" - integrity sha512-+xbLWsT9NoibeMMJw4te0pbY4q/Z1gt/vzhB0z9RRNGVyqCgQiK5NUJ11eW6etSyPZ9QFeAMnqO2dzscWUTy2w== +semantic-release@^17.2.3: + version "17.2.3" + resolved "https://registry.yarnpkg.com/semantic-release/-/semantic-release-17.2.3.tgz#11f10b851d4e75b1015b17515c433049b3df994c" + integrity sha512-MY1MlowGQrkOR7+leOD8ICkVOC6i1szbwDODdbJ0UdshtMx8Ms0bhpRQmEEliqYKEb5PLv/dqs6zKKuHT7UxTg== dependencies: "@semantic-release/commit-analyzer" "^8.0.0" "@semantic-release/error" "^2.2.0" @@ -18302,16 +18284,12 @@ semver-regex@^2.0.0: resolved "https://registry.yarnpkg.com/semver-regex/-/semver-regex-2.0.0.tgz#a93c2c5844539a770233379107b38c7b4ac9d338" integrity sha512-mUdIBBvdn0PLOeP3TEkMH7HHeUP3GjsXCwKarjv/kGmUFOYg1VqEemKhoQpWMu6X2I8kHeuVdGibLGkVK+/5Qw== -"semver@2 || 3 || 4 || 5": - version "5.7.0" - resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.0.tgz#790a7cf6fea5459bac96110b29b60412dc8ff96b" - -"semver@2.x || 3.x || 4 || 5", "semver@^2.3.0 || 3.x || 4 || 5", semver@^5.0.3, semver@^5.1.0, semver@^5.7.0, semver@^5.7.1: +"semver@2 || 3 || 4 || 5", "semver@2.x || 3.x || 4 || 5", "semver@^2.3.0 || 3.x || 4 || 5", semver@^5.0.3, semver@^5.1.0, semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0, semver@^5.7.0, semver@^5.7.1: version "5.7.1" resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7" integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ== -semver@5.6.0, semver@^5.5.1, semver@^5.6.0: +semver@5.6.0: version "5.6.0" resolved "https://registry.yarnpkg.com/semver/-/semver-5.6.0.tgz#7e74256fbaa49c75aa7c7a205cc22799cac80004" @@ -18320,10 +18298,6 @@ semver@7.0.0: resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e" integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A== -semver@^5.3.0, semver@^5.4.1, semver@^5.5.0: - version "5.5.0" - resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.0.tgz#dc4bbc7a6ca9d916dee5d43516f0092b58f7b8ab" - semver@^6.0.0, semver@^6.2.0, semver@^6.3.0: version "6.3.0" resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d" @@ -21025,14 +20999,6 @@ yargs-parser@^15.0.1: camelcase "^5.0.0" decamelize "^1.2.0" -yargs-parser@^16.1.0: - version "16.1.0" - resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-16.1.0.tgz#73747d53ae187e7b8dbe333f95714c76ea00ecf1" - integrity sha512-H/V41UNZQPkUMIT5h5hiwg4QKIY1RPvoBV4XcjUbRM8Bk2oKqqyZ0DIEbTFZB0XjbtSPG8SAa/0DxCQmiRgzKg== - dependencies: - camelcase "^5.0.0" - decamelize "^1.2.0" - yargs-parser@^18.1.1: version "18.1.3" resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-18.1.3.tgz#be68c4975c6b2abf469236b0c870362fab09a7b0" @@ -21090,24 +21056,7 @@ yargs@^14.2.3: y18n "^4.0.0" yargs-parser "^15.0.1" -yargs@^15.0.1: - version "15.0.2" - resolved "https://registry.yarnpkg.com/yargs/-/yargs-15.0.2.tgz#4248bf218ef050385c4f7e14ebdf425653d13bd3" - integrity sha512-GH/X/hYt+x5hOat4LMnCqMd8r5Cv78heOMIJn1hr7QPPBqfeC6p89Y78+WB9yGDvfpCvgasfmWLzNzEioOUD9Q== - dependencies: - cliui "^6.0.0" - decamelize "^1.2.0" - find-up "^4.1.0" - get-caller-file "^2.0.1" - require-directory "^2.1.1" - require-main-filename "^2.0.0" - set-blocking "^2.0.0" - string-width "^4.2.0" - which-module "^2.0.0" - y18n "^4.0.0" - yargs-parser "^16.1.0" - -yargs@^15.3.1: +yargs@^15.0.1, yargs@^15.3.1: version "15.3.1" resolved "https://registry.yarnpkg.com/yargs/-/yargs-15.3.1.tgz#9505b472763963e54afe60148ad27a330818e98b" integrity sha512-92O1HWEjw27sBfgmXiixJWT5hRBp2eobqXicLtPBIDBhYB+1HpwZlXmbW2luivBJHBzki+7VyCLRtAkScbTBQA== From 574275d116e9e1d6a3541f02dadaeb1bbe39bfc8 Mon Sep 17 00:00:00 2001 From: David Conner Date: Thu, 19 Nov 2020 09:55:34 -0500 Subject: [PATCH 03/23] feat(dashboardeditor): add image settings form --- .../CardEditForm/CardEditFormContent.jsx | 8 +- .../DataSeriesFormContent.jsx} | 0 .../DataSeriesFormContent.test.jsx} | 2 +- .../DataSeriesFormSettings.jsx | 130 ++++++++++++++++++ .../ImageCardFormContent.jsx} | 7 +- .../ImageCardFormSettings.jsx | 124 +++++++++++++++++ .../CardEditForm/CardEditFormSettings.jsx | 100 +++----------- .../CardEditForm/_card-edit-form.scss | 22 +++ src/components/ImageCard/ImageHotspots.jsx | 25 +++- 9 files changed, 327 insertions(+), 91 deletions(-) rename src/components/CardEditor/CardEditForm/CardEditFormItems/{DataSeriesFormItem/DataSeriesFormItem.jsx => DataSeriesFormItems/DataSeriesFormContent.jsx} (100%) rename src/components/CardEditor/CardEditForm/CardEditFormItems/{DataSeriesFormItem/DataSeriesFormItem.test.jsx => DataSeriesFormItems/DataSeriesFormContent.test.jsx} (99%) create mode 100644 src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItems/DataSeriesFormSettings.jsx rename src/components/CardEditor/CardEditForm/CardEditFormItems/{ImageCardFormItem/ImageCardFormItem.jsx => ImageCardFormItems/ImageCardFormContent.jsx} (79%) create mode 100644 src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormSettings.jsx diff --git a/src/components/CardEditor/CardEditForm/CardEditFormContent.jsx b/src/components/CardEditor/CardEditForm/CardEditFormContent.jsx index 6cac8bc92e..8c0b3b8c38 100644 --- a/src/components/CardEditor/CardEditForm/CardEditFormContent.jsx +++ b/src/components/CardEditor/CardEditForm/CardEditFormContent.jsx @@ -12,8 +12,8 @@ import { TextArea, TextInput, Dropdown } from '../../../index'; import { timeRangeToJSON } from '../../DashboardEditor/editorUtils'; import { DataItemsPropTypes } from '../../DashboardEditor/DashboardEditor'; -import DataSeriesFormItem from './CardEditFormItems/DataSeriesFormItem/DataSeriesFormItem'; -import ImageCardFormItem from './CardEditFormItems/ImageCardFormItem/ImageCardFormItem'; +import DataSeriesFormContent from './CardEditFormItems/DataSeriesFormItems/DataSeriesFormContent'; +import ImageCardFormContent from './CardEditFormItems/ImageCardFormItems/ImageCardFormContent'; const { iotPrefix } = settings; @@ -257,7 +257,7 @@ const CardEditFormContent = ({ titleText={mergedI18n.timeRange} /> - )} {type === CARD_TYPES.IMAGE && ( - + )} ); diff --git a/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItem/DataSeriesFormItem.jsx b/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItems/DataSeriesFormContent.jsx similarity index 100% rename from src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItem/DataSeriesFormItem.jsx rename to src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItems/DataSeriesFormContent.jsx diff --git a/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItem/DataSeriesFormItem.test.jsx b/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItems/DataSeriesFormContent.test.jsx similarity index 99% rename from src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItem/DataSeriesFormItem.test.jsx rename to src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItems/DataSeriesFormContent.test.jsx index d9b22e1cba..b4d951db1b 100644 --- a/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItem/DataSeriesFormItem.test.jsx +++ b/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItems/DataSeriesFormContent.test.jsx @@ -5,7 +5,7 @@ import userEvent from '@testing-library/user-event'; import DataSeriesFormItem, { formatSeries, formatDataItemsForDropdown, -} from './DataSeriesFormItem'; +} from './DataSeriesFormContent'; const cardConfig = { id: 'Timeseries', diff --git a/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItems/DataSeriesFormSettings.jsx b/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItems/DataSeriesFormSettings.jsx new file mode 100644 index 0000000000..c919e1dfc5 --- /dev/null +++ b/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItems/DataSeriesFormSettings.jsx @@ -0,0 +1,130 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import { settings } from '../../../../../constants/Settings'; +import { TextInput } from '../../../../../index'; + +const { iotPrefix } = settings; + +const propTypes = { + /** card data value */ + cardConfig: PropTypes.shape({ + id: PropTypes.string, + title: PropTypes.string, + size: PropTypes.string, + type: PropTypes.string, + content: PropTypes.shape({ + series: PropTypes.arrayOf( + PropTypes.shape({ + label: PropTypes.string, + dataSourceId: PropTypes.string, + color: PropTypes.string, + }) + ), + xLabel: PropTypes.string, + yLabel: PropTypes.string, + unit: PropTypes.string, + includeZeroOnXaxis: PropTypes.bool, + includeZeroOnYaxis: PropTypes.bool, + timeDataSourceId: PropTypes.string, + }), + interval: PropTypes.string, + showLegend: PropTypes.bool, + }), + /** Callback function when form data changes */ + onChange: PropTypes.func.isRequired, + i18n: PropTypes.shape({ + xAxisLabel: PropTypes.string, + yAxisLabel: PropTypes.string, + unitLabel: PropTypes.string, + decimalPrecisionLabel: PropTypes.string, + showLegendLable: PropTypes.string, + }), +}; + +const defaultProps = { + cardConfig: {}, + i18n: { + xAxisLabel: 'X-axis label', + yAxisLabel: 'Y-axis label', + unitLabel: 'Unit', + decimalPrecisionLabel: 'Decimal precision', + showLegendLable: 'Show legend', + }, +}; + +const DataSeriesFormSettings = ({ cardConfig, onChange, i18n }) => { + const mergedI18n = { ...defaultProps.i18n, ...i18n }; + const { content, id } = cardConfig; + + const baseClassName = `${iotPrefix}--card-edit-form`; + + return ( + <> +
+ + onChange({ + ...cardConfig, + content: { ...cardConfig.content, xLabel: evt.target.value }, + }) + } + value={content?.xLabel} + /> +
+
+ + onChange({ + ...cardConfig, + content: { ...cardConfig.content, yLabel: evt.target.value }, + }) + } + value={content?.yLabel} + /> +
+
+ + onChange({ + ...cardConfig, + content: { ...cardConfig.content, unit: evt.target.value }, + }) + } + value={content?.unit} + /> +
+
+ + onChange({ + ...cardConfig, + content: { + ...cardConfig.content, + decimalPrecision: evt.target.value, + }, + }) + } + value={content?.decimalPrecision} + /> +
+ + ); +}; + +DataSeriesFormSettings.propTypes = propTypes; +DataSeriesFormSettings.defaultProps = defaultProps; + +export default DataSeriesFormSettings; diff --git a/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItem/ImageCardFormItem.jsx b/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormContent.jsx similarity index 79% rename from src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItem/ImageCardFormItem.jsx rename to src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormContent.jsx index 544658d507..2baa93f536 100644 --- a/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItem/ImageCardFormItem.jsx +++ b/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormContent.jsx @@ -1,6 +1,8 @@ import React from 'react'; import PropTypes from 'prop-types'; +import {Scale32} from '@carbon/icons-react'; +import Button from '../../../../Button'; import { settings } from '../../../../../constants/Settings'; const { iotPrefix, prefix } = settings; @@ -39,7 +41,7 @@ const ImageCardFormItems = ({ cardConfig, i18n }) => { const baseClassName = `${iotPrefix}--card-edit-form`; return ( <> -
{mergedI18n.image}
+
{mergedI18n.image}
+
); diff --git a/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormSettings.jsx b/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormSettings.jsx new file mode 100644 index 0000000000..4d26d473b3 --- /dev/null +++ b/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormSettings.jsx @@ -0,0 +1,124 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { RadioButtonGroup, RadioButton, FormGroup, ToggleSmall } from 'carbon-components-react'; + +import { settings } from '../../../../../constants/Settings'; +import { TextInput } from '../../../../../index'; +import ColorDropdown from '../../../../ColorDropdown/ColorDropdown' + +const { iotPrefix } = settings; + +const propTypes = { + /** card data value */ + cardConfig: PropTypes.shape({ + id: PropTypes.string, + title: PropTypes.string, + size: PropTypes.string, + type: PropTypes.string, + content: PropTypes.shape({ + series: PropTypes.arrayOf( + PropTypes.shape({ + label: PropTypes.string, + dataSourceId: PropTypes.string, + color: PropTypes.string, + }) + ), + xLabel: PropTypes.string, + yLabel: PropTypes.string, + unit: PropTypes.string, + includeZeroOnXaxis: PropTypes.bool, + includeZeroOnYaxis: PropTypes.bool, + timeDataSourceId: PropTypes.string, + }), + interval: PropTypes.string, + showLegend: PropTypes.bool, + }), + /** Callback function when form data changes */ + onChange: PropTypes.func.isRequired, + i18n: PropTypes.shape({ + xAxisLabel: PropTypes.string, + yAxisLabel: PropTypes.string, + unitLabel: PropTypes.string, + decimalPrecisionLabel: PropTypes.string, + showLegendLable: PropTypes.string, + }), +}; + +const defaultProps = { + cardConfig: {}, + i18n: { + displayOptions: 'Image display options', + colorTitleText: 'Background color', + hideMap: 'Hide mini map', + hideZoom: 'Hide zoom controls', + zoomLevel: 'Zoom level', + }, +}; + +const DataSeriesFormSettings = ({ cardConfig, onChange, i18n }) => { + const mergedI18n = { ...defaultProps.i18n, ...i18n }; + const { content, id } = cardConfig; + + const baseClassName = `${iotPrefix}--card-edit-form`; + + return ( + <> +
+ + onChange({ + ...cardConfig, + content: { ...cardConfig.content, displayOption: evt }, + }) + } orientation="vertical" legend={`${mergedI18n.displayOptions}`} labelPosition='right'> + + + + + + + onChange({ + ...cardConfig, + content: { ...cardConfig.content, background: evt.color.carbonColor }, + }) + } + /> + +
+
+
+ {mergedI18n.hideMap} + onChange({ ...cardConfig, content: { ...cardConfig.content, hideMinimap: bool } })} + /> +
+
+
+
+ {mergedI18n.hideZoom} + onChange({ ...cardConfig, content: { ...cardConfig.content, hideZoomControls: bool } })} + /> +
+
+ + ); +}; + +DataSeriesFormSettings.propTypes = propTypes; +DataSeriesFormSettings.defaultProps = defaultProps; + +export default DataSeriesFormSettings; diff --git a/src/components/CardEditor/CardEditForm/CardEditFormSettings.jsx b/src/components/CardEditor/CardEditForm/CardEditFormSettings.jsx index 8e02fcacd5..8ee50369ea 100644 --- a/src/components/CardEditor/CardEditForm/CardEditFormSettings.jsx +++ b/src/components/CardEditor/CardEditForm/CardEditFormSettings.jsx @@ -1,10 +1,12 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { settings } from '../../../constants/Settings'; -import { TextInput } from '../../../index'; +import { CARD_TYPES } from '../../../constants/LayoutConstants'; + +import DataSeriesFormSettings from './CardEditFormItems/DataSeriesFormItems/DataSeriesFormSettings'; +import ImageCardFormSettings from './CardEditFormItems/ImageCardFormItems/ImageCardFormSettings'; + -const { iotPrefix } = settings; const propTypes = { /** card data value */ @@ -33,94 +35,30 @@ const propTypes = { }), /** Callback function when form data changes */ onChange: PropTypes.func.isRequired, - i18n: PropTypes.shape({ - xAxisLabel: PropTypes.string, - yAxisLabel: PropTypes.string, - unitLabel: PropTypes.string, - decimalPrecisionLabel: PropTypes.string, - showLegendLable: PropTypes.string, - }), + i18n: PropTypes.shape({}), }; const defaultProps = { cardConfig: {}, - i18n: { - xAxisLabel: 'X-axis label', - yAxisLabel: 'Y-axis label', - unitLabel: 'Unit', - decimalPrecisionLabel: 'Decimal precision', - showLegendLable: 'Show legend', - }, + i18n: {}, }; const CardEditFormSettings = ({ cardConfig, onChange, i18n }) => { const mergedI18n = { ...defaultProps.i18n, ...i18n }; - const { content, id } = cardConfig; + const { type } = cardConfig; + - const baseClassName = `${iotPrefix}--card-edit-form`; return ( - <> -
- - onChange({ - ...cardConfig, - content: { ...cardConfig.content, xLabel: evt.target.value }, - }) - } - value={content?.xLabel} - /> -
-
- - onChange({ - ...cardConfig, - content: { ...cardConfig.content, yLabel: evt.target.value }, - }) - } - value={content?.yLabel} - /> -
-
- - onChange({ - ...cardConfig, - content: { ...cardConfig.content, unit: evt.target.value }, - }) - } - value={content?.unit} - /> -
-
- - onChange({ - ...cardConfig, - content: { - ...cardConfig.content, - decimalPrecision: evt.target.value, - }, - }) - } - value={content?.decimalPrecision} - /> -
- {/* +
+ {type === CARD_TYPES.TIMESERIES && ( + + )} + {type === CARD_TYPES.IMAGE && ( + + )} + + {/* TODO: support and legend toggling in future iteration
@@ -136,7 +74,7 @@ const CardEditFormSettings = ({ cardConfig, onChange, i18n }) => { />
*/} - +
); }; diff --git a/src/components/CardEditor/CardEditForm/_card-edit-form.scss b/src/components/CardEditor/CardEditForm/_card-edit-form.scss index 14826ad8dc..973af8fda9 100644 --- a/src/components/CardEditor/CardEditForm/_card-edit-form.scss +++ b/src/components/CardEditor/CardEditForm/_card-edit-form.scss @@ -3,18 +3,23 @@ background: $ui-01; display: flex; flex-direction: column; + .#{$prefix}--tab-content { flex: 1; } + .#{$prefix}--tabs__nav--hidden { width: 100%; + .#{$prefix}--tabs__nav-link { width: 100%; } } + .#{$prefix}--file__selected-file { background-color: $ui-02; } + .color-picker { .color-picker-button { // need to leave just enough room for the selected border @@ -22,16 +27,19 @@ height: 1.95rem; border: solid $spacing-01 $ui-01; } + .color-picker-button__selected { border: solid $spacing-01 $interactive-04; } } + &--content { flex: 1; margin: -$spacing-05; height: 100%; padding-top: $spacing-05; } + &--form-section { padding: $spacing-03 $spacing-05; @include type-style('productive-heading-01'); @@ -39,11 +47,14 @@ border-bottom: solid 1px $ui-03; margin-bottom: $spacing-05; } + &--input-label { font-size: 0.75rem; } + &--input { padding-bottom: $spacing-05; + &--label { font-size: 0.75rem; } @@ -83,3 +94,14 @@ max-height: none; } } + +// Image card form styles +.#{$iot-prefix}--card-edit-form--form-section-image { + &-input { + margin-bottom: $spacing-05; + } + + &-btn { + width: 100%; + } +} diff --git a/src/components/ImageCard/ImageHotspots.jsx b/src/components/ImageCard/ImageHotspots.jsx index 4c5933a43c..f85542d51c 100644 --- a/src/components/ImageCard/ImageHotspots.jsx +++ b/src/components/ImageCard/ImageHotspots.jsx @@ -1,4 +1,4 @@ -import React, { useCallback, useMemo, useState } from 'react'; +import React, { useCallback, useMemo, useState, useEffect } from 'react'; import useDeepCompareEffect from 'use-deep-compare-effect'; import PropTypes from 'prop-types'; import { InlineLoading } from 'carbon-components-react'; @@ -19,6 +19,8 @@ const propTypes = { src: PropTypes.string, /** alt tag and shown on mouseover */ alt: PropTypes.string, + /** value for object-fit property - fit, fill, stretch */ + displayOption: PropTypes.string, /** optional array of hotspots to render over the image */ hotspots: PropTypes.arrayOf(PropTypes.shape(HotspotPropTypes)), /** optional features to enable or disable */ @@ -52,6 +54,7 @@ const propTypes = { const defaultProps = { id: null, src: null, + displayOption: null, hotspots: [], alt: null, hideZoomControls: false, @@ -419,6 +422,7 @@ const ImageHotspots = ({ renderIconByName, locale, selectedHotspots, + displayOption, }) => { // Image needs to be stored in state because we're dragging it around when zoomed in, and we need to keep track of when it loads const [image, setImage] = useState({}); @@ -437,6 +441,18 @@ const ImageHotspots = ({ hideMinimap: hideMinimapProp, }); + useEffect( + () => { + + setOptions({ + hideZoomControls: hideZoomControlsProp, + hideHotspots: hideHotspotsProp, + hideMinimap: hideMinimapProp, + }) + }, + [hideZoomControlsProp, hideHotspotsProp, hideMinimapProp] + ) + const orientation = width > height ? 'landscape' : 'portrait'; const ratio = orientation === 'landscape' ? width / height : height / width; @@ -474,7 +490,10 @@ const ImageHotspots = ({ cursor: isEditable && !dragging ? 'crosshair' : 'auto', position: 'relative', left: image.offsetX, - top: image.offsetY, + top: displayOption ? 0 : image.offsetY, + height: displayOption ? '100%' : 'auto', + width: displayOption ? '100%' : 'auto', + objectFit: displayOption, }; const hotspotsStyle = { @@ -540,7 +559,7 @@ const ImageHotspots = ({ if (imageLoaded) { if (container.orientation === 'landscape') { - imageStyle.height = image.height; + imageStyle.height = displayOption ? '100%' : image.height; } else { imageStyle.width = image.width; } From 093ae1cdbe264aad9a7583ac5d537acf2ccca631 Mon Sep 17 00:00:00 2001 From: David Conner Date: Fri, 20 Nov 2020 12:16:25 -0500 Subject: [PATCH 04/23] feat(dashboardeditor): add settings form to editor --- .../ImageCardFormSettings.jsx | 133 ++++++++++++++---- .../CardEditForm/_card-edit-form.scss | 8 ++ .../DashboardEditor/_dashboard-editor.scss | 1 + src/components/ImageCard/ImageHotspots.jsx | 17 +-- 4 files changed, 125 insertions(+), 34 deletions(-) diff --git a/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormSettings.jsx b/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormSettings.jsx index 4d26d473b3..924a5d2af9 100644 --- a/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormSettings.jsx +++ b/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormSettings.jsx @@ -1,10 +1,16 @@ -import React from 'react'; +import React, { useState } from 'react'; import PropTypes from 'prop-types'; -import { RadioButtonGroup, RadioButton, FormGroup, ToggleSmall } from 'carbon-components-react'; +import { + RadioButtonGroup, + RadioButton, + FormGroup, + ToggleSmall, + Slider, +} from 'carbon-components-react'; +import { gray10, gray80, white } from '@carbon/colors'; import { settings } from '../../../../../constants/Settings'; -import { TextInput } from '../../../../../index'; -import ColorDropdown from '../../../../ColorDropdown/ColorDropdown' +import ColorDropdown from '../../../../ColorDropdown/ColorDropdown'; const { iotPrefix } = settings; @@ -51,53 +57,115 @@ const defaultProps = { colorTitleText: 'Background color', hideMap: 'Hide mini map', hideZoom: 'Hide zoom controls', - zoomLevel: 'Zoom level', + zoomLevel: 'Max zoom level', }, }; -const DataSeriesFormSettings = ({ cardConfig, onChange, i18n }) => { +const backGroundColor = (hex) => { + let color; + switch (hex) { + case '#f4f4f4': + color = { carbonColor: gray10, name: 'gray10' }; + break; + case '#393939': + color = { carbonColor: gray80, name: 'gray80' }; + break; + case '#ffffff': + color = { carbonColor: white, name: 'white' }; + break; + default: + color = null; + break; + } + return color; +}; + +const ImageCardFormSettings = ({ cardConfig, onChange, i18n }) => { const mergedI18n = { ...defaultProps.i18n, ...i18n }; - const { content, id } = cardConfig; + const [zoom, setZoom] = useState(cardConfig.content.zoomLevel || 0); const baseClassName = `${iotPrefix}--card-edit-form`; + const handleZoomChange = ({ value }) => { + onChange({ + ...cardConfig, + content: { ...cardConfig.content, zoomMax: value }, + }); + setZoom(value); + }; + return ( <> +
- onChange({ - ...cardConfig, - content: { ...cardConfig.content, displayOption: evt }, - }) - } orientation="vertical" legend={`${mergedI18n.displayOptions}`} labelPosition='right'> - - - + + onChange({ + ...cardConfig, + content: { ...cardConfig.content, displayOption: evt }, + }) + } + orientation="vertical" + legend={`${mergedI18n.displayOptions}`} + labelPosition="right" + valueSelected={cardConfig.content.displayOption}> + + + +
+
onChange({ ...cardConfig, - content: { ...cardConfig.content, background: evt.color.carbonColor }, + content: { + ...cardConfig.content, + background: evt.color.carbonColor, + }, }) } /> -
{mergedI18n.hideMap} onChange({ ...cardConfig, content: { ...cardConfig.content, hideMinimap: bool } })} + onToggle={(bool) => + onChange({ + ...cardConfig, + content: { ...cardConfig.content, hideMinimap: bool }, + }) + } />
@@ -106,19 +174,36 @@ const DataSeriesFormSettings = ({ cardConfig, onChange, i18n }) => { {mergedI18n.hideZoom} onChange({ ...cardConfig, content: { ...cardConfig.content, hideZoomControls: bool } })} + onToggle={(bool) => + onChange({ + ...cardConfig, + content: { ...cardConfig.content, hideZoomControls: bool }, + }) + } + /> +
+ +
+
+
+ ); }; -DataSeriesFormSettings.propTypes = propTypes; -DataSeriesFormSettings.defaultProps = defaultProps; +ImageCardFormSettings.propTypes = propTypes; +ImageCardFormSettings.defaultProps = defaultProps; -export default DataSeriesFormSettings; +export default ImageCardFormSettings; diff --git a/src/components/CardEditor/CardEditForm/_card-edit-form.scss b/src/components/CardEditor/CardEditForm/_card-edit-form.scss index 973af8fda9..679a805aae 100644 --- a/src/components/CardEditor/CardEditForm/_card-edit-form.scss +++ b/src/components/CardEditor/CardEditForm/_card-edit-form.scss @@ -97,6 +97,10 @@ // Image card form styles .#{$iot-prefix}--card-edit-form--form-section-image { + .#{$prefix}--fieldset { + margin-bottom: 0; + } + &-input { margin-bottom: $spacing-05; } @@ -104,4 +108,8 @@ &-btn { width: 100%; } + + .#{$prefix}--slider { + min-width: 4.5rem; + } } diff --git a/src/components/DashboardEditor/_dashboard-editor.scss b/src/components/DashboardEditor/_dashboard-editor.scss index 8f666e84e9..e91749cbb3 100644 --- a/src/components/DashboardEditor/_dashboard-editor.scss +++ b/src/components/DashboardEditor/_dashboard-editor.scss @@ -66,6 +66,7 @@ flex: 1; background-color: $text-03; margin-left: $spacing-05; + margin-right: $spacing-05; &__card:focus { outline: 2px solid $focus; diff --git a/src/components/ImageCard/ImageHotspots.jsx b/src/components/ImageCard/ImageHotspots.jsx index f85542d51c..d83b04bbb9 100644 --- a/src/components/ImageCard/ImageHotspots.jsx +++ b/src/components/ImageCard/ImageHotspots.jsx @@ -441,17 +441,13 @@ const ImageHotspots = ({ hideMinimap: hideMinimapProp, }); - useEffect( - () => { - + useEffect(() => { setOptions({ hideZoomControls: hideZoomControlsProp, hideHotspots: hideHotspotsProp, hideMinimap: hideMinimapProp, - }) - }, - [hideZoomControlsProp, hideHotspotsProp, hideMinimapProp] - ) + }); + }, [hideZoomControlsProp, hideHotspotsProp, hideMinimapProp]); const orientation = width > height ? 'landscape' : 'portrait'; const ratio = orientation === 'landscape' ? width / height : height / width; @@ -488,12 +484,13 @@ const ImageHotspots = ({ const imageStyle = { cursor: isEditable && !dragging ? 'crosshair' : 'auto', - position: 'relative', - left: image.offsetX, - top: displayOption ? 0 : image.offsetY, + position: 'absolute', + left: '50%', + top: '50%', height: displayOption ? '100%' : 'auto', width: displayOption ? '100%' : 'auto', objectFit: displayOption, + transform: 'translate(-50%, -50%)', }; const hotspotsStyle = { From 3bb51b8bfcd8ebcec1d085762561699e094ddeb3 Mon Sep 17 00:00:00 2001 From: David Conner Date: Fri, 20 Nov 2020 12:20:17 -0500 Subject: [PATCH 05/23] chore(dashboardeditor): formatting --- .../DataSeriesFormSettings.jsx | 118 +++++++++--------- .../ImageCardFormContent.jsx | 14 ++- .../CardEditForm/CardEditFormSettings.jsx | 20 +-- 3 files changed, 82 insertions(+), 70 deletions(-) diff --git a/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItems/DataSeriesFormSettings.jsx b/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItems/DataSeriesFormSettings.jsx index c919e1dfc5..714bdb486a 100644 --- a/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItems/DataSeriesFormSettings.jsx +++ b/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItems/DataSeriesFormSettings.jsx @@ -61,65 +61,65 @@ const DataSeriesFormSettings = ({ cardConfig, onChange, i18n }) => { return ( <> -
- - onChange({ - ...cardConfig, - content: { ...cardConfig.content, xLabel: evt.target.value }, - }) - } - value={content?.xLabel} - /> -
-
- - onChange({ - ...cardConfig, - content: { ...cardConfig.content, yLabel: evt.target.value }, - }) - } - value={content?.yLabel} - /> -
-
- - onChange({ - ...cardConfig, - content: { ...cardConfig.content, unit: evt.target.value }, - }) - } - value={content?.unit} - /> -
-
- - onChange({ - ...cardConfig, - content: { - ...cardConfig.content, - decimalPrecision: evt.target.value, - }, - }) - } - value={content?.decimalPrecision} - /> -
+
+ + onChange({ + ...cardConfig, + content: { ...cardConfig.content, xLabel: evt.target.value }, + }) + } + value={content?.xLabel} + /> +
+
+ + onChange({ + ...cardConfig, + content: { ...cardConfig.content, yLabel: evt.target.value }, + }) + } + value={content?.yLabel} + /> +
+
+ + onChange({ + ...cardConfig, + content: { ...cardConfig.content, unit: evt.target.value }, + }) + } + value={content?.unit} + /> +
+
+ + onChange({ + ...cardConfig, + content: { + ...cardConfig.content, + decimalPrecision: evt.target.value, + }, + }) + } + value={content?.decimalPrecision} + /> +
); }; diff --git a/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormContent.jsx b/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormContent.jsx index 2baa93f536..1d3f0a7e1a 100644 --- a/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormContent.jsx +++ b/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormContent.jsx @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import {Scale32} from '@carbon/icons-react'; +import { Scale32 } from '@carbon/icons-react'; import Button from '../../../../Button'; import { settings } from '../../../../../constants/Settings'; @@ -41,7 +41,10 @@ const ImageCardFormItems = ({ cardConfig, i18n }) => { const baseClassName = `${iotPrefix}--card-edit-form`; return ( <> -
{mergedI18n.image}
+
+ {mergedI18n.image} +
- +
); diff --git a/src/components/CardEditor/CardEditForm/CardEditFormSettings.jsx b/src/components/CardEditor/CardEditForm/CardEditFormSettings.jsx index 8ee50369ea..a8c8d6297a 100644 --- a/src/components/CardEditor/CardEditForm/CardEditFormSettings.jsx +++ b/src/components/CardEditor/CardEditForm/CardEditFormSettings.jsx @@ -6,8 +6,6 @@ import { CARD_TYPES } from '../../../constants/LayoutConstants'; import DataSeriesFormSettings from './CardEditFormItems/DataSeriesFormItems/DataSeriesFormSettings'; import ImageCardFormSettings from './CardEditFormItems/ImageCardFormItems/ImageCardFormSettings'; - - const propTypes = { /** card data value */ cardConfig: PropTypes.shape({ @@ -47,16 +45,22 @@ const CardEditFormSettings = ({ cardConfig, onChange, i18n }) => { const mergedI18n = { ...defaultProps.i18n, ...i18n }; const { type } = cardConfig; - - return (
{type === CARD_TYPES.TIMESERIES && ( - + + )} + {type === CARD_TYPES.IMAGE && ( + )} - {type === CARD_TYPES.IMAGE && ( - - )} {/* TODO: support and legend toggling in future iteration From 93c78f9635fe9bc3ef03830f7cff5acc5e601b0c Mon Sep 17 00:00:00 2001 From: David Conner Date: Fri, 20 Nov 2020 13:12:12 -0500 Subject: [PATCH 06/23] chore(dashboardeditor): update snapshots --- .../__snapshots__/CardEditor.story.storyshot | 448 ++++-------------- .../__snapshots__/Dashboard.story.storyshot | 60 ++- .../DashboardGrid.story.storyshot | 10 +- .../__snapshots__/ImageCard.story.storyshot | 30 +- .../ImageHotspots.story.storyshot | 60 ++- 5 files changed, 210 insertions(+), 398 deletions(-) diff --git a/src/components/CardEditor/__snapshots__/CardEditor.story.storyshot b/src/components/CardEditor/__snapshots__/CardEditor.story.storyshot index 0224b0bb80..deeae53fde 100644 --- a/src/components/CardEditor/__snapshots__/CardEditor.story.storyshot +++ b/src/components/CardEditor/__snapshots__/CardEditor.story.storyshot @@ -289,134 +289,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper role="tabpanel" selected={false} > -
-
- -
-
- -
-
-
-
-
-
- -
-
- -
-
-
-
-
-
- -
-
- -
-
-
-
-
-
- -
-
- -
-
-
-
+
-
+
-
+
- +
+ +
-
-
-
+
- +
+ +
-
-
-
+
- +
+ +
-
-
-
+
- +
+ +
@@ -1608,134 +1483,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper role="tabpanel" selected={false} > -
-
- -
-
- -
-
-
-
-
-
- -
-
- -
-
-
-
-
-
- -
-
- -
-
-
-
-
-
- -
-
- -
-
-
-
+
@@ -4534,9 +4538,13 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb style={ Object { "cursor": "auto", - "left": undefined, - "position": "relative", - "top": undefined, + "height": "auto", + "left": "50%", + "objectFit": null, + "position": "absolute", + "top": "50%", + "transform": "translate(-50%, -50%)", + "width": "auto", } } /> @@ -6978,9 +6986,13 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb style={ Object { "cursor": "auto", - "left": undefined, - "position": "relative", - "top": undefined, + "height": "auto", + "left": "50%", + "objectFit": null, + "position": "absolute", + "top": "50%", + "transform": "translate(-50%, -50%)", + "width": "auto", } } /> @@ -7638,9 +7650,13 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb style={ Object { "cursor": "auto", - "left": undefined, - "position": "relative", - "top": undefined, + "height": "auto", + "left": "50%", + "objectFit": null, + "position": "absolute", + "top": "50%", + "transform": "translate(-50%, -50%)", + "width": "auto", } } /> @@ -11996,9 +12012,13 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb style={ Object { "cursor": "auto", - "left": undefined, - "position": "relative", - "top": undefined, + "height": "auto", + "left": "50%", + "objectFit": null, + "position": "absolute", + "top": "50%", + "transform": "translate(-50%, -50%)", + "width": "auto", } } /> @@ -26815,9 +26835,13 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb style={ Object { "cursor": "auto", - "left": undefined, - "position": "relative", - "top": undefined, + "height": "auto", + "left": "50%", + "objectFit": null, + "position": "absolute", + "top": "50%", + "transform": "translate(-50%, -50%)", + "width": "auto", } } /> diff --git a/src/components/Dashboard/__snapshots__/DashboardGrid.story.storyshot b/src/components/Dashboard/__snapshots__/DashboardGrid.story.storyshot index e0f31594ba..74745bfdc6 100644 --- a/src/components/Dashboard/__snapshots__/DashboardGrid.story.storyshot +++ b/src/components/Dashboard/__snapshots__/DashboardGrid.story.storyshot @@ -2499,9 +2499,13 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb style={ Object { "cursor": "auto", - "left": undefined, - "position": "relative", - "top": undefined, + "height": "auto", + "left": "50%", + "objectFit": null, + "position": "absolute", + "top": "50%", + "transform": "translate(-50%, -50%)", + "width": "auto", } } /> diff --git a/src/components/ImageCard/__snapshots__/ImageCard.story.storyshot b/src/components/ImageCard/__snapshots__/ImageCard.story.storyshot index bbb2f3066f..845f987c9f 100644 --- a/src/components/ImageCard/__snapshots__/ImageCard.story.storyshot +++ b/src/components/ImageCard/__snapshots__/ImageCard.story.storyshot @@ -116,9 +116,13 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Image style={ Object { "cursor": "auto", - "left": undefined, - "position": "relative", - "top": undefined, + "height": "auto", + "left": "50%", + "objectFit": null, + "position": "absolute", + "top": "50%", + "transform": "translate(-50%, -50%)", + "width": "auto", } } /> @@ -372,9 +376,13 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Image style={ Object { "cursor": "auto", - "left": undefined, - "position": "relative", - "top": undefined, + "height": "auto", + "left": "50%", + "objectFit": null, + "position": "absolute", + "top": "50%", + "transform": "translate(-50%, -50%)", + "width": "auto", } } /> @@ -1033,9 +1041,13 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Image style={ Object { "cursor": "auto", - "left": undefined, - "position": "relative", - "top": undefined, + "height": "auto", + "left": "50%", + "objectFit": null, + "position": "absolute", + "top": "50%", + "transform": "translate(-50%, -50%)", + "width": "auto", } } /> diff --git a/src/components/ImageCard/__snapshots__/ImageHotspots.story.storyshot b/src/components/ImageCard/__snapshots__/ImageHotspots.story.storyshot index 8430e701af..dde963211d 100644 --- a/src/components/ImageCard/__snapshots__/ImageHotspots.story.storyshot +++ b/src/components/ImageCard/__snapshots__/ImageHotspots.story.storyshot @@ -46,9 +46,13 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Image style={ Object { "cursor": "crosshair", - "left": undefined, - "position": "relative", - "top": undefined, + "height": "auto", + "left": "50%", + "objectFit": null, + "position": "absolute", + "top": "50%", + "transform": "translate(-50%, -50%)", + "width": "auto", } } /> @@ -386,9 +390,13 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Image style={ Object { "cursor": "auto", - "left": undefined, - "position": "relative", - "top": undefined, + "height": "auto", + "left": "50%", + "objectFit": null, + "position": "absolute", + "top": "50%", + "transform": "translate(-50%, -50%)", + "width": "auto", } } /> @@ -726,9 +734,13 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Image style={ Object { "cursor": "auto", - "left": undefined, - "position": "relative", - "top": undefined, + "height": "auto", + "left": "50%", + "objectFit": null, + "position": "absolute", + "top": "50%", + "transform": "translate(-50%, -50%)", + "width": "auto", } } /> @@ -1066,9 +1078,13 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Image style={ Object { "cursor": "auto", - "left": undefined, - "position": "relative", - "top": undefined, + "height": "auto", + "left": "50%", + "objectFit": null, + "position": "absolute", + "top": "50%", + "transform": "translate(-50%, -50%)", + "width": "auto", } } /> @@ -1406,9 +1422,13 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Image style={ Object { "cursor": "auto", - "left": undefined, - "position": "relative", - "top": undefined, + "height": "auto", + "left": "50%", + "objectFit": null, + "position": "absolute", + "top": "50%", + "transform": "translate(-50%, -50%)", + "width": "auto", } } /> @@ -1746,9 +1766,13 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Image style={ Object { "cursor": "auto", - "left": undefined, - "position": "relative", - "top": undefined, + "height": "auto", + "left": "50%", + "objectFit": null, + "position": "absolute", + "top": "50%", + "transform": "translate(-50%, -50%)", + "width": "auto", } } /> From 75d11d261213cf1ee4ecaa2ebe6ea4937217163f Mon Sep 17 00:00:00 2001 From: David Conner Date: Fri, 20 Nov 2020 14:09:11 -0500 Subject: [PATCH 07/23] fix(cardeditor): fix unit test --- src/components/CardEditor/CardEditor.test.jsx | 5 +---- .../__snapshots__/TableBodyRow.story.storyshot | 4 ++-- src/components/Table/__snapshots__/Table.story.storyshot | 8 ++++---- .../WizardModal/__snapshots__/WizardModal.story.storyshot | 4 ++-- 4 files changed, 9 insertions(+), 12 deletions(-) diff --git a/src/components/CardEditor/CardEditor.test.jsx b/src/components/CardEditor/CardEditor.test.jsx index 45d7973650..2b54323ae1 100644 --- a/src/components/CardEditor/CardEditor.test.jsx +++ b/src/components/CardEditor/CardEditor.test.jsx @@ -41,10 +41,7 @@ describe('CardEditor', () => { onAddCard={actions.onAddCard} /> ); - userEvent.type( - screen.getByRole('textbox', { name: 'Card title X-axis label' }), - 'z' - ); + userEvent.type(screen.getAllByRole('textbox')[0], 'z'); userEvent.tab(); expect(actions.onChange).toHaveBeenCalledWith({ ...defaultCard, diff --git a/src/components/Table/TableBody/TableBodyRow/__snapshots__/TableBodyRow.story.storyshot b/src/components/Table/TableBody/TableBodyRow/__snapshots__/TableBodyRow.story.storyshot index 9fed62bb84..7b8d02fce7 100644 --- a/src/components/Table/TableBody/TableBodyRow/__snapshots__/TableBodyRow.story.storyshot +++ b/src/components/Table/TableBody/TableBodyRow/__snapshots__/TableBodyRow.story.storyshot @@ -1005,13 +1005,13 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Table >
diff --git a/src/components/Table/__snapshots__/Table.story.storyshot b/src/components/Table/__snapshots__/Table.story.storyshot index 5341e4f2e7..c3d6c64ee5 100644 --- a/src/components/Table/__snapshots__/Table.story.storyshot +++ b/src/components/Table/__snapshots__/Table.story.storyshot @@ -97085,13 +97085,13 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Table >
@@ -340532,13 +340532,13 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Table >
diff --git a/src/components/WizardModal/__snapshots__/WizardModal.story.storyshot b/src/components/WizardModal/__snapshots__/WizardModal.story.storyshot index 990397883b..451502e0c9 100644 --- a/src/components/WizardModal/__snapshots__/WizardModal.story.storyshot +++ b/src/components/WizardModal/__snapshots__/WizardModal.story.storyshot @@ -904,13 +904,13 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Wizar >
From 02d898345cd4b0008b832021712de1977ded9667 Mon Sep 17 00:00:00 2001 From: David Conner Date: Fri, 20 Nov 2020 20:30:31 -0500 Subject: [PATCH 08/23] feat(imagecardformitems): added test --- .../ImageCardFormSettings.jsx | 70 +++++++-------- .../ImageCardFormSettings.test.jsx | 85 +++++++++++++++++++ 2 files changed, 121 insertions(+), 34 deletions(-) create mode 100644 src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormSettings.test.jsx diff --git a/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormSettings.jsx b/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormSettings.jsx index 924a5d2af9..ed4f07cca4 100644 --- a/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormSettings.jsx +++ b/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormSettings.jsx @@ -1,11 +1,10 @@ -import React, { useState } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; import { RadioButtonGroup, RadioButton, FormGroup, ToggleSmall, - Slider, } from 'carbon-components-react'; import { gray10, gray80, white } from '@carbon/colors'; @@ -22,19 +21,12 @@ const propTypes = { size: PropTypes.string, type: PropTypes.string, content: PropTypes.shape({ - series: PropTypes.arrayOf( - PropTypes.shape({ - label: PropTypes.string, - dataSourceId: PropTypes.string, - color: PropTypes.string, - }) - ), - xLabel: PropTypes.string, - yLabel: PropTypes.string, - unit: PropTypes.string, - includeZeroOnXaxis: PropTypes.bool, - includeZeroOnYaxis: PropTypes.bool, - timeDataSourceId: PropTypes.string, + hideMinimap: PropTypes.bool, + hideHotspots: PropTypes.bool, + hideZoomControls: PropTypes.bool, + id: PropTypes.string, + displayOption: PropTypes.string, + background: PropTypes.string, }), interval: PropTypes.string, showLegend: PropTypes.bool, @@ -42,11 +34,11 @@ const propTypes = { /** Callback function when form data changes */ onChange: PropTypes.func.isRequired, i18n: PropTypes.shape({ - xAxisLabel: PropTypes.string, - yAxisLabel: PropTypes.string, - unitLabel: PropTypes.string, - decimalPrecisionLabel: PropTypes.string, - showLegendLable: PropTypes.string, + displayOptions: PropTypes.string, + colorTitleText: PropTypes.string, + hideMap: PropTypes.string, + hideZoom: PropTypes.string, + zoomLevel: PropTypes.string, }), }; @@ -61,7 +53,7 @@ const defaultProps = { }, }; -const backGroundColor = (hex) => { +export const backGroundColor = (hex) => { let color; switch (hex) { case '#f4f4f4': @@ -82,17 +74,19 @@ const backGroundColor = (hex) => { const ImageCardFormSettings = ({ cardConfig, onChange, i18n }) => { const mergedI18n = { ...defaultProps.i18n, ...i18n }; - const [zoom, setZoom] = useState(cardConfig.content.zoomLevel || 0); + // Hiding until the UX for this form item is figured out. + // const [zoom, setZoom] = useState(cardConfig.content.zoomLevel || 0); const baseClassName = `${iotPrefix}--card-edit-form`; - const handleZoomChange = ({ value }) => { - onChange({ - ...cardConfig, - content: { ...cardConfig.content, zoomMax: value }, - }); - setZoom(value); - }; + // Hiding until the UX for this form item is figured out. + // const handleZoomChange = ({ value }) => { + // onChange({ + // ...cardConfig, + // content: { ...cardConfig.content, zoomMax: value }, + // }); + // setZoom(value); + // }; return ( <> @@ -110,18 +104,21 @@ const ImageCardFormSettings = ({ cardConfig, onChange, i18n }) => { orientation="vertical" legend={`${mergedI18n.displayOptions}`} labelPosition="right" - valueSelected={cardConfig.content.displayOption}> + valueSelected={cardConfig.content?.displayOption}> {
{ { carbonColor: white, name: 'white' }, ]} id={`${baseClassName}--input-color`} - selectedColor={backGroundColor(cardConfig.content.background)} + selectedColor={backGroundColor(cardConfig.content?.background)} onChange={(evt) => onChange({ ...cardConfig, @@ -155,11 +153,12 @@ const ImageCardFormSettings = ({ cardConfig, onChange, i18n }) => {
{mergedI18n.hideMap} onChange({ ...cardConfig, @@ -173,11 +172,12 @@ const ImageCardFormSettings = ({ cardConfig, onChange, i18n }) => {
{mergedI18n.hideZoom} onChange({ ...cardConfig, @@ -187,6 +187,8 @@ const ImageCardFormSettings = ({ cardConfig, onChange, i18n }) => { />
+ {/* + // Hiding until the UX for this form item is figured out.
{ onChange={handleZoomChange} />
-
+
*/}
); diff --git a/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormSettings.test.jsx b/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormSettings.test.jsx new file mode 100644 index 0000000000..e579fcf3cb --- /dev/null +++ b/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormSettings.test.jsx @@ -0,0 +1,85 @@ +import React from 'react'; +import { render, screen, fireEvent } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; + +import ImageCardFormSettings, { backGroundColor } from './ImageCardFormSettings'; + +const cardConfig = { + id: 'ImageCard', + title: 'Untitled', + size: 'MEDIUMWIDE', + type: 'IMAGE', + content: { + hideMinimap: false, + hideHotspots: false, + hideZoomControls: true, + id: 'image.png', + displayOption: 'cover', + background: "#f4f4f4" + } +}; + +describe('ImageCardFormSettings', () => { + const actions = { + onChange: jest.fn(), + }; + + it('fires onChange when user interacts with image form inputs', () => { + render( + + ); + + userEvent.click(screen.getByTestId('iot--card-edit-form--input-radio1')); + + expect(actions.onChange).toHaveBeenCalledWith({ + ...cardConfig, + content: { + background: "#f4f4f4", + displayOption: "contain", + hideHotspots: false, + hideMinimap: false, + hideZoomControls: true, + id: 'image.png', + } + }); + actions.onChange.mockReset(); + userEvent.click(screen.getByTestId('iot--card-edit-form--input-toggle1')); + expect(actions.onChange).toHaveBeenCalledWith({ + ...cardConfig, + content: { + background: "#f4f4f4", + displayOption: "cover", + hideHotspots: false, + hideMinimap: true, + hideZoomControls: true, + id: 'image.png', + } + }); + actions.onChange.mockReset(); + + userEvent.click(screen.getByTestId('iot--card-edit-form--input-toggle2')); + expect(actions.onChange).toHaveBeenCalledWith({ + ...cardConfig, + content: { + background: "#f4f4f4", + displayOption: "cover", + hideHotspots: false, + hideMinimap: false, + hideZoomControls: false, + id: 'image.png', + } + }); + actions.onChange.mockReset(); + + }); + + it('returns an object with the right color token', () => { + expect(backGroundColor('#f4f4f4')).toEqual({ "carbonColor": "#f4f4f4", "name": "gray10" }); + expect(backGroundColor('#ffffff')).toEqual({ "carbonColor": "#ffffff", "name": "white" }); + expect(backGroundColor('#393939')).toEqual({ "carbonColor": "#393939", "name": "gray80" }); + }); + +}); \ No newline at end of file From 72682c148b03742920589754c1f894890a03b067 Mon Sep 17 00:00:00 2001 From: David Conner Date: Fri, 20 Nov 2020 20:31:20 -0500 Subject: [PATCH 09/23] chore(imagecardformitems): remove unused var --- .../ImageCardFormItems/ImageCardFormSettings.test.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormSettings.test.jsx b/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormSettings.test.jsx index e579fcf3cb..9dca65ae07 100644 --- a/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormSettings.test.jsx +++ b/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormSettings.test.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { render, screen, fireEvent } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import ImageCardFormSettings, { backGroundColor } from './ImageCardFormSettings'; From 4a174cb376f7ee91a7469465f1aa69a79406b72d Mon Sep 17 00:00:00 2001 From: David Conner Date: Fri, 20 Nov 2020 22:23:30 -0500 Subject: [PATCH 10/23] chore(imagecaredformitems) run prettier --- .../ImageCardFormSettings.jsx | 4 +- .../ImageCardFormSettings.test.jsx | 47 +++++++++++-------- 2 files changed, 30 insertions(+), 21 deletions(-) diff --git a/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormSettings.jsx b/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormSettings.jsx index ed4f07cca4..34a81020c1 100644 --- a/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormSettings.jsx +++ b/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormSettings.jsx @@ -153,7 +153,7 @@ const ImageCardFormSettings = ({ cardConfig, onChange, i18n }) => {
{mergedI18n.hideMap} {
{mergedI18n.hideZoom} { @@ -27,7 +29,7 @@ describe('ImageCardFormSettings', () => { it('fires onChange when user interacts with image form inputs', () => { render( ); @@ -37,26 +39,26 @@ describe('ImageCardFormSettings', () => { expect(actions.onChange).toHaveBeenCalledWith({ ...cardConfig, content: { - background: "#f4f4f4", - displayOption: "contain", + background: '#f4f4f4', + displayOption: 'contain', hideHotspots: false, hideMinimap: false, hideZoomControls: true, id: 'image.png', - } + }, }); actions.onChange.mockReset(); userEvent.click(screen.getByTestId('iot--card-edit-form--input-toggle1')); expect(actions.onChange).toHaveBeenCalledWith({ ...cardConfig, content: { - background: "#f4f4f4", - displayOption: "cover", + background: '#f4f4f4', + displayOption: 'cover', hideHotspots: false, hideMinimap: true, hideZoomControls: true, id: 'image.png', - } + }, }); actions.onChange.mockReset(); @@ -64,22 +66,29 @@ describe('ImageCardFormSettings', () => { expect(actions.onChange).toHaveBeenCalledWith({ ...cardConfig, content: { - background: "#f4f4f4", - displayOption: "cover", + background: '#f4f4f4', + displayOption: 'cover', hideHotspots: false, hideMinimap: false, hideZoomControls: false, id: 'image.png', - } + }, }); actions.onChange.mockReset(); - }); it('returns an object with the right color token', () => { - expect(backGroundColor('#f4f4f4')).toEqual({ "carbonColor": "#f4f4f4", "name": "gray10" }); - expect(backGroundColor('#ffffff')).toEqual({ "carbonColor": "#ffffff", "name": "white" }); - expect(backGroundColor('#393939')).toEqual({ "carbonColor": "#393939", "name": "gray80" }); + expect(backGroundColor('#f4f4f4')).toEqual({ + carbonColor: '#f4f4f4', + name: 'gray10', + }); + expect(backGroundColor('#ffffff')).toEqual({ + carbonColor: '#ffffff', + name: 'white', + }); + expect(backGroundColor('#393939')).toEqual({ + carbonColor: '#393939', + name: 'gray80', + }); }); - -}); \ No newline at end of file +}); From cef8b463393849accb8715cd68e771474ed546ea Mon Sep 17 00:00:00 2001 From: David Conner Date: Sat, 21 Nov 2020 13:07:51 -0500 Subject: [PATCH 11/23] chore(imagecardformsettings): kick off new build --- .../ImageCardFormItems/ImageCardFormSettings.test.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormSettings.test.jsx b/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormSettings.test.jsx index aa3189ae91..1afa486acc 100644 --- a/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormSettings.test.jsx +++ b/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormSettings.test.jsx @@ -8,7 +8,7 @@ import ImageCardFormSettings, { const cardConfig = { id: 'ImageCard', - title: 'Untitled', + title: 'Test Title', size: 'MEDIUMWIDE', type: 'IMAGE', content: { From 3b91af3404195f16a78904d454edba2ce408b4cd Mon Sep 17 00:00:00 2001 From: David Conner Date: Mon, 23 Nov 2020 15:42:39 -0500 Subject: [PATCH 12/23] feat(imagecardhotspots): allow for styling and hotspot positioning --- .../ImageCardFormSettings.jsx | 35 +++++-------------- src/components/ImageCard/ImageHotspots.jsx | 15 ++++---- src/components/ImageCard/ImageUploader.jsx | 2 +- 3 files changed, 17 insertions(+), 35 deletions(-) diff --git a/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormSettings.jsx b/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormSettings.jsx index 34a81020c1..1e211a70d5 100644 --- a/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormSettings.jsx +++ b/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormSettings.jsx @@ -53,24 +53,13 @@ const defaultProps = { }, }; -export const backGroundColor = (hex) => { - let color; - switch (hex) { - case '#f4f4f4': - color = { carbonColor: gray10, name: 'gray10' }; - break; - case '#393939': - color = { carbonColor: gray80, name: 'gray80' }; - break; - case '#ffffff': - color = { carbonColor: white, name: 'white' }; - break; - default: - color = null; - break; - } - return color; -}; +const colors = [ + { carbonColor: gray10, name: 'gray10' }, + { carbonColor: gray80, name: 'gray80' }, + { carbonColor: white, name: 'white' }, +] + + const ImageCardFormSettings = ({ cardConfig, onChange, i18n }) => { const mergedI18n = { ...defaultProps.i18n, ...i18n }; @@ -89,7 +78,6 @@ const ImageCardFormSettings = ({ cardConfig, onChange, i18n }) => { // }; return ( - <>
@@ -131,13 +119,9 @@ const ImageCardFormSettings = ({ cardConfig, onChange, i18n }) => { data-testid={`${baseClassName}--input-color-dropdown`} titleText={mergedI18n.colorTitleText} light - colors={[ - { carbonColor: gray10, name: 'gray10' }, - { carbonColor: gray80, name: 'gray80' }, - { carbonColor: white, name: 'white' }, - ]} + colors={colors} id={`${baseClassName}--input-color`} - selectedColor={backGroundColor(cardConfig.content?.background)} + selectedColor={colors.find(color => color.carbonColor === cardConfig.content?.background)} onChange={(evt) => onChange({ ...cardConfig, @@ -201,7 +185,6 @@ const ImageCardFormSettings = ({ cardConfig, onChange, i18n }) => {
*/}
- ); }; diff --git a/src/components/ImageCard/ImageHotspots.jsx b/src/components/ImageCard/ImageHotspots.jsx index d83b04bbb9..79f0f53079 100644 --- a/src/components/ImageCard/ImageHotspots.jsx +++ b/src/components/ImageCard/ImageHotspots.jsx @@ -484,13 +484,12 @@ const ImageHotspots = ({ const imageStyle = { cursor: isEditable && !dragging ? 'crosshair' : 'auto', - position: 'absolute', - left: '50%', - top: '50%', - height: displayOption ? '100%' : 'auto', - width: displayOption ? '100%' : 'auto', + position: 'relative', + left: image.offsetX, + top: image.offsetY, + height: displayOption && image.scale === 1 ? '100%' : 'auto', + width: displayOption && image.scale === 1 ? '100%' : 'auto', objectFit: displayOption, - transform: 'translate(-50%, -50%)', }; const hotspotsStyle = { @@ -556,9 +555,9 @@ const ImageHotspots = ({ if (imageLoaded) { if (container.orientation === 'landscape') { - imageStyle.height = displayOption ? '100%' : image.height; + imageStyle.height = displayOption && image.scale === 1 ? '100%' : image.height; } else { - imageStyle.width = image.width; + imageStyle.width = displayOption && image.scale === 1 ? '100%' : image.width; } if (image.orientation === 'landscape') { diff --git a/src/components/ImageCard/ImageUploader.jsx b/src/components/ImageCard/ImageUploader.jsx index f7b5fb667c..5e1f705a87 100644 --- a/src/components/ImageCard/ImageUploader.jsx +++ b/src/components/ImageCard/ImageUploader.jsx @@ -44,7 +44,7 @@ const propTypes = { }; const defaultProps = { - accept: ['APNG', 'AVIF', 'GIF', 'JPEG', 'PNG', 'WebP'], + accept: ['APNG', 'AVIF', 'GIF', 'JPEG', 'JPG', 'PNG', 'WebP'], onBrowseClick: () => {}, onUpload: () => {}, i18n: i18nDefaults, From 380ca6687504d9feb8e6270f72721d93accdafd9 Mon Sep 17 00:00:00 2001 From: David Conner Date: Mon, 23 Nov 2020 15:44:32 -0500 Subject: [PATCH 13/23] chore(imagecardformitems): ran formatting --- .../ImageCardFormSettings.jsx | 180 +++++++++--------- .../ImageCardFormSettings.test.jsx | 19 +- src/components/ImageCard/ImageHotspots.jsx | 6 +- 3 files changed, 96 insertions(+), 109 deletions(-) diff --git a/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormSettings.jsx b/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormSettings.jsx index 1e211a70d5..51a32d7ddf 100644 --- a/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormSettings.jsx +++ b/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormSettings.jsx @@ -57,9 +57,7 @@ const colors = [ { carbonColor: gray10, name: 'gray10' }, { carbonColor: gray80, name: 'gray80' }, { carbonColor: white, name: 'white' }, -] - - +]; const ImageCardFormSettings = ({ cardConfig, onChange, i18n }) => { const mergedI18n = { ...defaultProps.i18n, ...i18n }; @@ -78,100 +76,102 @@ const ImageCardFormSettings = ({ cardConfig, onChange, i18n }) => { // }; return ( -
-
- - - onChange({ - ...cardConfig, - content: { ...cardConfig.content, displayOption: evt }, - }) - } - orientation="vertical" - legend={`${mergedI18n.displayOptions}`} - labelPosition="right" - valueSelected={cardConfig.content?.displayOption}> - - - - - -
-
- color.carbonColor === cardConfig.content?.background)} +
+
+ + onChange({ ...cardConfig, - content: { - ...cardConfig.content, - background: evt.color.carbonColor, - }, + content: { ...cardConfig.content, displayOption: evt }, }) } - /> -
-
-
- {mergedI18n.hideMap} - - onChange({ - ...cardConfig, - content: { ...cardConfig.content, hideMinimap: bool }, - }) - } + orientation="vertical" + legend={`${mergedI18n.displayOptions}`} + labelPosition="right" + valueSelected={cardConfig.content?.displayOption}> + -
-
-
-
- {mergedI18n.hideZoom} - - onChange({ - ...cardConfig, - content: { ...cardConfig.content, hideZoomControls: bool }, - }) - } + -
+ + + +
+
+ color.carbonColor === cardConfig.content?.background + )} + onChange={(evt) => + onChange({ + ...cardConfig, + content: { + ...cardConfig.content, + background: evt.color.carbonColor, + }, + }) + } + /> +
+
+
+ {mergedI18n.hideMap} + + onChange({ + ...cardConfig, + content: { ...cardConfig.content, hideMinimap: bool }, + }) + } + /> +
+
+
+
+ {mergedI18n.hideZoom} + + onChange({ + ...cardConfig, + content: { ...cardConfig.content, hideZoomControls: bool }, + }) + } + />
- {/* +
+ {/* // Hiding until the UX for this form item is figured out.
@@ -184,7 +184,7 @@ const ImageCardFormSettings = ({ cardConfig, onChange, i18n }) => { />
*/} -
+
); }; diff --git a/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormSettings.test.jsx b/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormSettings.test.jsx index 1afa486acc..02702ce6cf 100644 --- a/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormSettings.test.jsx +++ b/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormSettings.test.jsx @@ -2,9 +2,7 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; -import ImageCardFormSettings, { - backGroundColor, -} from './ImageCardFormSettings'; +import ImageCardFormSettings from './ImageCardFormSettings'; const cardConfig = { id: 'ImageCard', @@ -77,18 +75,5 @@ describe('ImageCardFormSettings', () => { actions.onChange.mockReset(); }); - it('returns an object with the right color token', () => { - expect(backGroundColor('#f4f4f4')).toEqual({ - carbonColor: '#f4f4f4', - name: 'gray10', - }); - expect(backGroundColor('#ffffff')).toEqual({ - carbonColor: '#ffffff', - name: 'white', - }); - expect(backGroundColor('#393939')).toEqual({ - carbonColor: '#393939', - name: 'gray80', - }); - }); + }); diff --git a/src/components/ImageCard/ImageHotspots.jsx b/src/components/ImageCard/ImageHotspots.jsx index 79f0f53079..63c82a1079 100644 --- a/src/components/ImageCard/ImageHotspots.jsx +++ b/src/components/ImageCard/ImageHotspots.jsx @@ -555,9 +555,11 @@ const ImageHotspots = ({ if (imageLoaded) { if (container.orientation === 'landscape') { - imageStyle.height = displayOption && image.scale === 1 ? '100%' : image.height; + imageStyle.height = + displayOption && image.scale === 1 ? '100%' : image.height; } else { - imageStyle.width = displayOption && image.scale === 1 ? '100%' : image.width; + imageStyle.width = + displayOption && image.scale === 1 ? '100%' : image.width; } if (image.orientation === 'landscape') { From d7d0809d4da8dff0cba5c95a26c4dedea28474f0 Mon Sep 17 00:00:00 2001 From: David Conner Date: Mon, 23 Nov 2020 15:49:44 -0500 Subject: [PATCH 14/23] chore(dashboard): update snaps --- .../__snapshots__/Dashboard.story.storyshot | 42 ++++++++----------- .../DashboardGrid.story.storyshot | 7 ++-- .../__snapshots__/ImageCard.story.storyshot | 21 ++++------ .../ImageHotspots.story.storyshot | 42 ++++++++----------- 4 files changed, 48 insertions(+), 64 deletions(-) diff --git a/src/components/Dashboard/__snapshots__/Dashboard.story.storyshot b/src/components/Dashboard/__snapshots__/Dashboard.story.storyshot index faa02b78a2..16b389d160 100644 --- a/src/components/Dashboard/__snapshots__/Dashboard.story.storyshot +++ b/src/components/Dashboard/__snapshots__/Dashboard.story.storyshot @@ -2119,11 +2119,10 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb Object { "cursor": "auto", "height": "auto", - "left": "50%", + "left": undefined, "objectFit": null, - "position": "absolute", - "top": "50%", - "transform": "translate(-50%, -50%)", + "position": "relative", + "top": undefined, "width": "auto", } } @@ -4539,11 +4538,10 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb Object { "cursor": "auto", "height": "auto", - "left": "50%", + "left": undefined, "objectFit": null, - "position": "absolute", - "top": "50%", - "transform": "translate(-50%, -50%)", + "position": "relative", + "top": undefined, "width": "auto", } } @@ -6987,11 +6985,10 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb Object { "cursor": "auto", "height": "auto", - "left": "50%", + "left": undefined, "objectFit": null, - "position": "absolute", - "top": "50%", - "transform": "translate(-50%, -50%)", + "position": "relative", + "top": undefined, "width": "auto", } } @@ -7651,11 +7648,10 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb Object { "cursor": "auto", "height": "auto", - "left": "50%", + "left": undefined, "objectFit": null, - "position": "absolute", - "top": "50%", - "transform": "translate(-50%, -50%)", + "position": "relative", + "top": undefined, "width": "auto", } } @@ -12013,11 +12009,10 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb Object { "cursor": "auto", "height": "auto", - "left": "50%", + "left": undefined, "objectFit": null, - "position": "absolute", - "top": "50%", - "transform": "translate(-50%, -50%)", + "position": "relative", + "top": undefined, "width": "auto", } } @@ -26836,11 +26831,10 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb Object { "cursor": "auto", "height": "auto", - "left": "50%", + "left": undefined, "objectFit": null, - "position": "absolute", - "top": "50%", - "transform": "translate(-50%, -50%)", + "position": "relative", + "top": undefined, "width": "auto", } } diff --git a/src/components/Dashboard/__snapshots__/DashboardGrid.story.storyshot b/src/components/Dashboard/__snapshots__/DashboardGrid.story.storyshot index 74745bfdc6..00158d4642 100644 --- a/src/components/Dashboard/__snapshots__/DashboardGrid.story.storyshot +++ b/src/components/Dashboard/__snapshots__/DashboardGrid.story.storyshot @@ -2500,11 +2500,10 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb Object { "cursor": "auto", "height": "auto", - "left": "50%", + "left": undefined, "objectFit": null, - "position": "absolute", - "top": "50%", - "transform": "translate(-50%, -50%)", + "position": "relative", + "top": undefined, "width": "auto", } } diff --git a/src/components/ImageCard/__snapshots__/ImageCard.story.storyshot b/src/components/ImageCard/__snapshots__/ImageCard.story.storyshot index 845f987c9f..ad5b8177b3 100644 --- a/src/components/ImageCard/__snapshots__/ImageCard.story.storyshot +++ b/src/components/ImageCard/__snapshots__/ImageCard.story.storyshot @@ -117,11 +117,10 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Image Object { "cursor": "auto", "height": "auto", - "left": "50%", + "left": undefined, "objectFit": null, - "position": "absolute", - "top": "50%", - "transform": "translate(-50%, -50%)", + "position": "relative", + "top": undefined, "width": "auto", } } @@ -377,11 +376,10 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Image Object { "cursor": "auto", "height": "auto", - "left": "50%", + "left": undefined, "objectFit": null, - "position": "absolute", - "top": "50%", - "transform": "translate(-50%, -50%)", + "position": "relative", + "top": undefined, "width": "auto", } } @@ -1042,11 +1040,10 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Image Object { "cursor": "auto", "height": "auto", - "left": "50%", + "left": undefined, "objectFit": null, - "position": "absolute", - "top": "50%", - "transform": "translate(-50%, -50%)", + "position": "relative", + "top": undefined, "width": "auto", } } diff --git a/src/components/ImageCard/__snapshots__/ImageHotspots.story.storyshot b/src/components/ImageCard/__snapshots__/ImageHotspots.story.storyshot index dde963211d..aa2d52d53d 100644 --- a/src/components/ImageCard/__snapshots__/ImageHotspots.story.storyshot +++ b/src/components/ImageCard/__snapshots__/ImageHotspots.story.storyshot @@ -47,11 +47,10 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Image Object { "cursor": "crosshair", "height": "auto", - "left": "50%", + "left": undefined, "objectFit": null, - "position": "absolute", - "top": "50%", - "transform": "translate(-50%, -50%)", + "position": "relative", + "top": undefined, "width": "auto", } } @@ -391,11 +390,10 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Image Object { "cursor": "auto", "height": "auto", - "left": "50%", + "left": undefined, "objectFit": null, - "position": "absolute", - "top": "50%", - "transform": "translate(-50%, -50%)", + "position": "relative", + "top": undefined, "width": "auto", } } @@ -735,11 +733,10 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Image Object { "cursor": "auto", "height": "auto", - "left": "50%", + "left": undefined, "objectFit": null, - "position": "absolute", - "top": "50%", - "transform": "translate(-50%, -50%)", + "position": "relative", + "top": undefined, "width": "auto", } } @@ -1079,11 +1076,10 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Image Object { "cursor": "auto", "height": "auto", - "left": "50%", + "left": undefined, "objectFit": null, - "position": "absolute", - "top": "50%", - "transform": "translate(-50%, -50%)", + "position": "relative", + "top": undefined, "width": "auto", } } @@ -1423,11 +1419,10 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Image Object { "cursor": "auto", "height": "auto", - "left": "50%", + "left": undefined, "objectFit": null, - "position": "absolute", - "top": "50%", - "transform": "translate(-50%, -50%)", + "position": "relative", + "top": undefined, "width": "auto", } } @@ -1767,11 +1762,10 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Image Object { "cursor": "auto", "height": "auto", - "left": "50%", + "left": undefined, "objectFit": null, - "position": "absolute", - "top": "50%", - "transform": "translate(-50%, -50%)", + "position": "relative", + "top": undefined, "width": "auto", } } From dac8552e46e3d32e368a05d600114a4151d36ac0 Mon Sep 17 00:00:00 2001 From: David Conner Date: Mon, 23 Nov 2020 15:54:32 -0500 Subject: [PATCH 15/23] chore(imagecardformitems): formatting --- .../ImageCardFormItems/ImageCardFormSettings.test.jsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormSettings.test.jsx b/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormSettings.test.jsx index 02702ce6cf..b2ad23afa2 100644 --- a/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormSettings.test.jsx +++ b/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormSettings.test.jsx @@ -74,6 +74,4 @@ describe('ImageCardFormSettings', () => { }); actions.onChange.mockReset(); }); - - }); From 496230f333acc598e73632f0cd06c00989609940 Mon Sep 17 00:00:00 2001 From: Scott Dickerson Date: Tue, 24 Nov 2020 14:46:32 -0700 Subject: [PATCH 16/23] fix(cardeditformcontent): populate timeRange on load --- .../CardEditForm/CardEditFormContent.jsx | 31 +++++++++++-------- .../CardEditForm/CardEditFormContent.test.jsx | 20 +++++++++++- .../DashboardEditor/editorUtils.jsx | 24 ++++++++++++++ 3 files changed, 61 insertions(+), 14 deletions(-) diff --git a/src/components/CardEditor/CardEditForm/CardEditFormContent.jsx b/src/components/CardEditor/CardEditForm/CardEditFormContent.jsx index 8c0b3b8c38..865b205686 100644 --- a/src/components/CardEditor/CardEditForm/CardEditFormContent.jsx +++ b/src/components/CardEditor/CardEditForm/CardEditFormContent.jsx @@ -46,7 +46,6 @@ const propTypes = { zoomMax: PropTypes.number, }), ]), - interval: PropTypes.string, showLegend: PropTypes.bool, }), /** Callback function when form data changes */ @@ -172,16 +171,24 @@ const CardEditFormContent = ({ getValidDataItems, getValidTimeRanges, }) => { - const { title, description, size, type, id } = cardConfig; + const { title, description, size, type, id, timeRange } = cardConfig; const mergedI18n = { ...defaultProps.i18n, ...i18n }; const [selectedDataItems, setSelectedDataItems] = useState([]); - const [selectedTimeRange, setSelectedTimeRange] = useState(''); + const [selectedTimeRange, setSelectedTimeRange] = useState(timeRange || ''); const baseClassName = `${iotPrefix}--card-edit-form`; const validTimeRanges = getValidTimeRanges ? getValidTimeRanges(cardConfig, selectedDataItems) : defaultTimeRangeOptions; + + const validTimeRangeOptions = validTimeRanges + ? validTimeRanges.map((range) => ({ + id: range, + text: mergedI18n[`${range}Label`] || range, + })) + : []; + return ( <>
@@ -236,21 +243,19 @@ const CardEditFormContent = ({ label={mergedI18n.selectATimeRange} direction="bottom" itemToString={(item) => item.text} - items={ - validTimeRanges - ? validTimeRanges.map((range) => ({ - id: range, - text: mergedI18n[range] || range, - })) - : [] - } + items={validTimeRangeOptions} + selectedItem={validTimeRangeOptions.find( + // This is a hacky workaround for a carbon issue + (validTimeRangeOption) => + validTimeRangeOption.id === selectedTimeRange + )} light onChange={({ selectedItem }) => { - const { range, interval } = timeRangeToJSON[selectedItem.id]; + const { range } = timeRangeToJSON[selectedItem.id]; setSelectedTimeRange(selectedItem.id); onChange({ ...cardConfig, - interval, + timeRange: selectedItem.id, dataSource: { ...cardConfig.dataSource, range }, }); }} diff --git a/src/components/CardEditor/CardEditForm/CardEditFormContent.test.jsx b/src/components/CardEditor/CardEditForm/CardEditFormContent.test.jsx index 02d801be2a..75baed8c38 100644 --- a/src/components/CardEditor/CardEditForm/CardEditFormContent.test.jsx +++ b/src/components/CardEditor/CardEditForm/CardEditFormContent.test.jsx @@ -33,7 +33,7 @@ const cardConfig = { }; const mockOnChange = jest.fn(); -const mockGetValidTimeRanges = jest.fn(); +const mockGetValidTimeRanges = jest.fn(() => ['last2Hours']); afterEach(() => { jest.clearAllMocks(); @@ -54,6 +54,24 @@ describe('CardEditFormContent', () => { ); expect(mockOnChange).toHaveBeenCalled(); expect(mockGetValidTimeRanges).toHaveBeenCalled(); + // Time range selector should start unselected + const timeRangeSelector = screen.getAllByLabelText('Time range'); + expect(timeRangeSelector[0].innerHTML).not.toEqual( + expect.stringContaining('last2Hours') + ); + }); + it('Should select timeRange if passed', () => { + render( + + ); + const timeRangeSelector = screen.getAllByLabelText('Time range'); + expect(timeRangeSelector[0].innerHTML).toEqual( + expect.stringContaining('last2Hours') + ); }); }); }); diff --git a/src/components/DashboardEditor/editorUtils.jsx b/src/components/DashboardEditor/editorUtils.jsx index f466448e79..418b7a6ba7 100644 --- a/src/components/DashboardEditor/editorUtils.jsx +++ b/src/components/DashboardEditor/editorUtils.jsx @@ -144,6 +144,30 @@ export const getDefaultCard = (type, i18n) => { * maps a selected time range to what is expected in the dashboardJSON */ export const timeRangeToJSON = { + lastHour: { + range: { + interval: 'hour', + count: -1, + type: 'rolling', + }, + interval: 'hour', + }, + last2Hours: { + range: { + interval: 'hour', + count: -2, + type: 'rolling', + }, + interval: 'hour', + }, + last4Hours: { + range: { interval: 'hour', count: -4, type: 'rolling' }, + interval: 'hour', + }, + last8Hours: { + range: { interval: 'hour', count: -8, type: 'rolling' }, + interval: 'hour', + }, last24Hours: { range: { interval: 'day', count: -1, type: 'rolling' }, interval: 'hour', From 7ee2c89353df763aea7ee38d5e2b4b43ce0e02f3 Mon Sep 17 00:00:00 2001 From: Scott Dickerson Date: Tue, 24 Nov 2020 14:51:18 -0700 Subject: [PATCH 17/23] fix(cardeditformcontent): populate timeRange on load --- src/components/CardEditor/CardEditForm/CardEditFormContent.jsx | 3 ++- .../CardEditor/CardEditForm/CardEditFormSettings.test.jsx | 1 - 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/CardEditor/CardEditForm/CardEditFormContent.jsx b/src/components/CardEditor/CardEditForm/CardEditFormContent.jsx index 865b205686..3f63afcb72 100644 --- a/src/components/CardEditor/CardEditForm/CardEditFormContent.jsx +++ b/src/components/CardEditor/CardEditForm/CardEditFormContent.jsx @@ -250,11 +250,12 @@ const CardEditFormContent = ({ validTimeRangeOption.id === selectedTimeRange )} light - onChange={({ selectedItem }) => { + onChange={({ selectedItem, interval }) => { const { range } = timeRangeToJSON[selectedItem.id]; setSelectedTimeRange(selectedItem.id); onChange({ ...cardConfig, + interval, timeRange: selectedItem.id, dataSource: { ...cardConfig.dataSource, range }, }); diff --git a/src/components/CardEditor/CardEditForm/CardEditFormSettings.test.jsx b/src/components/CardEditor/CardEditForm/CardEditFormSettings.test.jsx index cbea1dac6a..345f6686db 100644 --- a/src/components/CardEditor/CardEditForm/CardEditFormSettings.test.jsx +++ b/src/components/CardEditor/CardEditForm/CardEditFormSettings.test.jsx @@ -29,7 +29,6 @@ const cardConfig = { timeDataSourceId: 'timestamp', addSpaceOnEdges: 1, }, - interval: 'day', }; const mockOnChange = jest.fn(); From 27c9e676bf46d6304f7bf94995078cc19110e156 Mon Sep 17 00:00:00 2001 From: Scott Dickerson Date: Tue, 24 Nov 2020 15:51:43 -0700 Subject: [PATCH 18/23] fix(cardedit): undo interval --- .../CardEditor/CardEditForm/CardEditFormContent.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/CardEditor/CardEditForm/CardEditFormContent.jsx b/src/components/CardEditor/CardEditForm/CardEditFormContent.jsx index 3f63afcb72..0f25e4916f 100644 --- a/src/components/CardEditor/CardEditForm/CardEditFormContent.jsx +++ b/src/components/CardEditor/CardEditForm/CardEditFormContent.jsx @@ -250,8 +250,8 @@ const CardEditFormContent = ({ validTimeRangeOption.id === selectedTimeRange )} light - onChange={({ selectedItem, interval }) => { - const { range } = timeRangeToJSON[selectedItem.id]; + onChange={({ selectedItem }) => { + const { range, interval } = timeRangeToJSON[selectedItem.id]; setSelectedTimeRange(selectedItem.id); onChange({ ...cardConfig, From f5b89459e894eb1697ce4cf8c7353e70dc6d3fa9 Mon Sep 17 00:00:00 2001 From: Scott Dickerson Date: Tue, 24 Nov 2020 16:41:26 -0700 Subject: [PATCH 19/23] fix(cardeditor): showLegend is in the incorrect location --- .../CardEditForm/CardEditFormContent.jsx | 2 +- .../DataSeriesFormItems/DataSeriesFormContent.jsx | 2 +- .../DataSeriesFormItems/DataSeriesFormSettings.jsx | 2 +- .../ImageCardFormItems/ImageCardFormContent.jsx | 1 - .../ImageCardFormItems/ImageCardFormSettings.jsx | 1 - .../CardEditForm/CardEditFormSettings.jsx | 2 +- src/components/CardEditor/CardEditor.jsx | 2 +- src/components/DashboardEditor/editorUtils.jsx | 3 +-- src/components/TimeSeriesCard/TimeSeriesCard.jsx | 13 +++++++------ .../__tests__/__snapshots__/publicAPI.test.js.snap | 14 +++++++------- 10 files changed, 20 insertions(+), 22 deletions(-) diff --git a/src/components/CardEditor/CardEditForm/CardEditFormContent.jsx b/src/components/CardEditor/CardEditForm/CardEditFormContent.jsx index 0f25e4916f..89a2e57b4a 100644 --- a/src/components/CardEditor/CardEditForm/CardEditFormContent.jsx +++ b/src/components/CardEditor/CardEditForm/CardEditFormContent.jsx @@ -39,6 +39,7 @@ const propTypes = { includeZeroOnXaxis: PropTypes.bool, includeZeroOnYaxis: PropTypes.bool, timeDataSourceId: PropTypes.string, + showLegend: PropTypes.bool, }), PropTypes.shape({ id: PropTypes.string, @@ -46,7 +47,6 @@ const propTypes = { zoomMax: PropTypes.number, }), ]), - showLegend: PropTypes.bool, }), /** Callback function when form data changes */ onChange: PropTypes.func.isRequired, diff --git a/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItems/DataSeriesFormContent.jsx b/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItems/DataSeriesFormContent.jsx index 572f472ef9..f5b29a0008 100644 --- a/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItems/DataSeriesFormContent.jsx +++ b/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItems/DataSeriesFormContent.jsx @@ -50,9 +50,9 @@ const propTypes = { includeZeroOnXaxis: PropTypes.bool, includeZeroOnYaxis: PropTypes.bool, timeDataSourceId: PropTypes.string, + showLegend: PropTypes.bool, }), interval: PropTypes.string, - showLegend: PropTypes.bool, }), /* callback when image input value changes (File object) */ onChange: PropTypes.func.isRequired, diff --git a/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItems/DataSeriesFormSettings.jsx b/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItems/DataSeriesFormSettings.jsx index 714bdb486a..2aa2b47858 100644 --- a/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItems/DataSeriesFormSettings.jsx +++ b/src/components/CardEditor/CardEditForm/CardEditFormItems/DataSeriesFormItems/DataSeriesFormSettings.jsx @@ -27,9 +27,9 @@ const propTypes = { includeZeroOnXaxis: PropTypes.bool, includeZeroOnYaxis: PropTypes.bool, timeDataSourceId: PropTypes.string, + showLegend: PropTypes.bool, }), interval: PropTypes.string, - showLegend: PropTypes.bool, }), /** Callback function when form data changes */ onChange: PropTypes.func.isRequired, diff --git a/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormContent.jsx b/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormContent.jsx index 1d3f0a7e1a..83871c0559 100644 --- a/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormContent.jsx +++ b/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormContent.jsx @@ -20,7 +20,6 @@ const propTypes = { zoomMax: PropTypes.number, }), interval: PropTypes.string, - showLegend: PropTypes.bool, }), /* callback when image input value changes (File object) */ // onChange: PropTypes.func.isRequired, diff --git a/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormSettings.jsx b/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormSettings.jsx index 51a32d7ddf..34c9d50436 100644 --- a/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormSettings.jsx +++ b/src/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormSettings.jsx @@ -29,7 +29,6 @@ const propTypes = { background: PropTypes.string, }), interval: PropTypes.string, - showLegend: PropTypes.bool, }), /** Callback function when form data changes */ onChange: PropTypes.func.isRequired, diff --git a/src/components/CardEditor/CardEditForm/CardEditFormSettings.jsx b/src/components/CardEditor/CardEditForm/CardEditFormSettings.jsx index a8c8d6297a..9f6832a5a0 100644 --- a/src/components/CardEditor/CardEditForm/CardEditFormSettings.jsx +++ b/src/components/CardEditor/CardEditForm/CardEditFormSettings.jsx @@ -27,9 +27,9 @@ const propTypes = { includeZeroOnXaxis: PropTypes.bool, includeZeroOnYaxis: PropTypes.bool, timeDataSourceId: PropTypes.string, + showLegend: PropTypes.bool, }), interval: PropTypes.string, - showLegend: PropTypes.bool, }), /** Callback function when form data changes */ onChange: PropTypes.func.isRequired, diff --git a/src/components/CardEditor/CardEditor.jsx b/src/components/CardEditor/CardEditor.jsx index d1af6163a5..21530ffa56 100644 --- a/src/components/CardEditor/CardEditor.jsx +++ b/src/components/CardEditor/CardEditor.jsx @@ -33,9 +33,9 @@ const propTypes = { includeZeroOnXaxis: PropTypes.bool, includeZeroOnYaxis: PropTypes.bool, timeDataSourceId: PropTypes.string, + showLegend: PropTypes.bool, }), interval: PropTypes.string, - showLegend: PropTypes.bool, }), /** Callback function when user clicks Show Gallery */ onShowGallery: PropTypes.func.isRequired, diff --git a/src/components/DashboardEditor/editorUtils.jsx b/src/components/DashboardEditor/editorUtils.jsx index 418b7a6ba7..5ad08b0d4a 100644 --- a/src/components/DashboardEditor/editorUtils.jsx +++ b/src/components/DashboardEditor/editorUtils.jsx @@ -73,9 +73,9 @@ export const getDefaultCard = (type, i18n) => { includeZeroOnXaxis: true, includeZeroOnYaxis: true, timeDataSourceId: 'timestamp', + showLegend: true, }, interval: 'day', - showLegend: true, }; case DASHBOARD_EDITOR_CARD_TYPES.SIMPLE_BAR: return { @@ -280,7 +280,6 @@ const renderTimeSeriesCard = (cardConfig, commonProps) => ( { const { @@ -308,6 +308,7 @@ const TimeSeriesCard = ({ chartType, zoomBar, showTimeInGMT, + showLegend, tooltipDateFormatPattern, addSpaceOnEdges, }, @@ -658,11 +659,11 @@ TimeSeriesCard.defaultProps = { content: { includeZeroOnXaxis: false, includeZeroOnYaxis: false, + showLegend: true, }, showTimeInGMT: false, domainRange: null, tooltipDateFormatPattern: 'L HH:mm:ss', - showLegend: null, }; export default TimeSeriesCard; diff --git a/src/utils/__tests__/__snapshots__/publicAPI.test.js.snap b/src/utils/__tests__/__snapshots__/publicAPI.test.js.snap index 78379756a6..3a003e3283 100644 --- a/src/utils/__tests__/__snapshots__/publicAPI.test.js.snap +++ b/src/utils/__tests__/__snapshots__/publicAPI.test.js.snap @@ -8405,6 +8405,9 @@ Map { ], "type": "arrayOf", }, + "showLegend": Object { + "type": "bool", + }, "timeDataSourceId": Object { "type": "string", }, @@ -8427,9 +8430,6 @@ Map { "interval": Object { "type": "string", }, - "showLegend": Object { - "type": "bool", - }, "size": Object { "type": "string", }, @@ -11441,6 +11441,7 @@ Map { "content": Object { "includeZeroOnXaxis": false, "includeZeroOnYaxis": false, + "showLegend": true, }, "domainRange": null, "i18n": Object { @@ -11448,7 +11449,6 @@ Map { "noDataLabel": "No data is available for this time range.", }, "locale": "en", - "showLegend": null, "showTimeInGMT": false, "size": "MEDIUM", "tooltipDateFormatPattern": "L HH:mm:ss", @@ -12012,6 +12012,9 @@ Map { "isRequired": true, "type": "oneOfType", }, + "showLegend": Object { + "type": "bool", + }, "timeDataSourceId": Object { "type": "string", }, @@ -12249,9 +12252,6 @@ Map { ], "type": "shape", }, - "showLegend": Object { - "type": "bool", - }, "showOverflow": [Function], "showTimeInGMT": Object { "type": "bool", From 76ff30d9fa184a28724103528ce2883bc23e1dc7 Mon Sep 17 00:00:00 2001 From: Scott Dickerson Date: Tue, 24 Nov 2020 16:52:46 -0700 Subject: [PATCH 20/23] test(timeseries): add showLegend to story --- src/components/TimeSeriesCard/TimeSeriesCard.story.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/TimeSeriesCard/TimeSeriesCard.story.jsx b/src/components/TimeSeriesCard/TimeSeriesCard.story.jsx index 1245faaae7..b864a0b6f8 100644 --- a/src/components/TimeSeriesCard/TimeSeriesCard.story.jsx +++ b/src/components/TimeSeriesCard/TimeSeriesCard.story.jsx @@ -53,6 +53,7 @@ export const SinglePoint = () => { includeZeroOnYaxis: true, timeDataSourceId: 'timestamp', addSpaceOnEdges: 1, + showLegend: true, })} values={getIntervalChartData(interval, 1, { min: 10, max: 100 }, 100)} interval={interval} From 917812e67c03388216737490d81d527abc24665e Mon Sep 17 00:00:00 2001 From: Scott Dickerson Date: Wed, 25 Nov 2020 11:01:19 -0700 Subject: [PATCH 21/23] chore(charts): upgrade carbon charts to fix bug --- .../@carbon/charts-react/bar-chart-grouped.js | 4 +++ .../@carbon/charts-react/bar-chart-simple.js | 4 +++ .../@carbon/charts-react/bar-chart-stacked.js | 4 +++ __mocks__/@carbon/charts-react/line-chart.js | 3 ++ __mocks__/@carbon/charts-react/pie-chart.js | 3 ++ jest.config.js | 5 ++- package.json | 4 +-- .../BarChartCard.story.storyshot | 24 ++++++------- .../__snapshots__/Dashboard.story.storyshot | 12 +++---- .../DashboardGrid.story.storyshot | 2 +- yarn.lock | 34 +++++-------------- 11 files changed, 52 insertions(+), 47 deletions(-) create mode 100644 __mocks__/@carbon/charts-react/bar-chart-grouped.js create mode 100644 __mocks__/@carbon/charts-react/bar-chart-simple.js create mode 100644 __mocks__/@carbon/charts-react/bar-chart-stacked.js create mode 100644 __mocks__/@carbon/charts-react/line-chart.js create mode 100644 __mocks__/@carbon/charts-react/pie-chart.js diff --git a/__mocks__/@carbon/charts-react/bar-chart-grouped.js b/__mocks__/@carbon/charts-react/bar-chart-grouped.js new file mode 100644 index 0000000000..f1911a61d1 --- /dev/null +++ b/__mocks__/@carbon/charts-react/bar-chart-grouped.js @@ -0,0 +1,4 @@ +const React = require('react'); + +module.exports = () => + React.createElement('div', { id: 'mock-bar-chart-grouped' }); diff --git a/__mocks__/@carbon/charts-react/bar-chart-simple.js b/__mocks__/@carbon/charts-react/bar-chart-simple.js new file mode 100644 index 0000000000..d44d7829ab --- /dev/null +++ b/__mocks__/@carbon/charts-react/bar-chart-simple.js @@ -0,0 +1,4 @@ +const React = require('react'); + +module.exports = () => + React.createElement('div', { id: 'mock-bar-chart-simple' }); diff --git a/__mocks__/@carbon/charts-react/bar-chart-stacked.js b/__mocks__/@carbon/charts-react/bar-chart-stacked.js new file mode 100644 index 0000000000..59e45bafd9 --- /dev/null +++ b/__mocks__/@carbon/charts-react/bar-chart-stacked.js @@ -0,0 +1,4 @@ +const React = require('react'); + +module.exports = () => + React.createElement('div', { id: 'mock-bar-chart-stacked' }); diff --git a/__mocks__/@carbon/charts-react/line-chart.js b/__mocks__/@carbon/charts-react/line-chart.js new file mode 100644 index 0000000000..657400c0fb --- /dev/null +++ b/__mocks__/@carbon/charts-react/line-chart.js @@ -0,0 +1,3 @@ +const React = require('react'); + +module.exports = () => React.createElement('div', { id: 'mock-line-chart' }); diff --git a/__mocks__/@carbon/charts-react/pie-chart.js b/__mocks__/@carbon/charts-react/pie-chart.js new file mode 100644 index 0000000000..eae4ff39b0 --- /dev/null +++ b/__mocks__/@carbon/charts-react/pie-chart.js @@ -0,0 +1,3 @@ +const React = require('react'); + +module.exports = () => React.createElement('div', { id: 'mock-pie-chart' }); diff --git a/jest.config.js b/jest.config.js index 25c29b7e37..e5f7fdafac 100644 --- a/jest.config.js +++ b/jest.config.js @@ -135,7 +135,10 @@ module.exports = { '^(?!.*\\.(js|jsx|css|json)$)': '/config/jest/fileTransform.js', }, testPathIgnorePatterns: ['/config/', '/lib/'], - transformIgnorePatterns: ['/node_modules/(?!(@carbon/charts)).+(.jsx?)'], + transformIgnorePatterns: [ + '/node_modules/(?!(@carbon/charts)).+(.jsx?)', + '/__mocks__/.+(.jsx?)', + ], watchPathIgnorePatterns: ['/coverage/', '/results/', '/.git/'], moduleFileExtensions: ['js', 'json', 'jsx'], snapshotSerializers: ['enzyme-to-json/serializer'], diff --git a/package.json b/package.json index 5981b2f3d1..51d668c1fc 100644 --- a/package.json +++ b/package.json @@ -126,8 +126,8 @@ }, "dependencies": { "@babel/runtime": "^7.10.2", - "@carbon/charts": "^0.41.1", - "@carbon/charts-react": "^0.40.13", + "@carbon/charts": "^0.41.6", + "@carbon/charts-react": "^0.41.6", "@carbon/colors": "10.15.0", "@carbon/icons-react": "10.17.0", "@carbon/layout": "10.12.0", diff --git a/src/components/BarChartCard/__snapshots__/BarChartCard.story.storyshot b/src/components/BarChartCard/__snapshots__/BarChartCard.story.storyshot index 2a4f2f9934..e53eb0b55c 100644 --- a/src/components/BarChartCard/__snapshots__/BarChartCard.story.storyshot +++ b/src/components/BarChartCard/__snapshots__/BarChartCard.story.storyshot @@ -90,7 +90,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/BarCh className="iot--bar-chart-container" >
@@ -213,7 +213,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/BarCh className="iot--bar-chart-container" >
@@ -507,7 +507,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/BarCh className="iot--bar-chart-container" >
@@ -675,7 +675,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/BarCh className="iot--bar-chart-container" >
@@ -798,7 +798,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/BarCh className="iot--bar-chart-container" >
@@ -921,7 +921,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/BarCh className="iot--bar-chart-container" >
@@ -1089,7 +1089,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/BarCh className="iot--bar-chart-container" >
@@ -1257,7 +1257,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/BarCh className="iot--bar-chart-container" >
@@ -1380,7 +1380,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/BarCh className="iot--bar-chart-container" >
@@ -1470,7 +1470,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/BarCh className="iot--bar-chart-container iot--bar-chart-container--editable" >
@@ -1641,7 +1641,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/BarCh className="iot--bar-chart-container iot--bar-chart-container--expanded" >
diff --git a/src/components/Dashboard/__snapshots__/Dashboard.story.storyshot b/src/components/Dashboard/__snapshots__/Dashboard.story.storyshot index 16b389d160..c10ab6d37b 100644 --- a/src/components/Dashboard/__snapshots__/Dashboard.story.storyshot +++ b/src/components/Dashboard/__snapshots__/Dashboard.story.storyshot @@ -333,7 +333,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb className="iot--bar-chart-container" >
@@ -2752,7 +2752,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb className="iot--bar-chart-container" >
@@ -5199,7 +5199,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb className="iot--bar-chart-container" >
@@ -7428,7 +7428,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb className="iot--bar-chart-container" >
@@ -10223,7 +10223,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb className="iot--bar-chart-container" >
@@ -25045,7 +25045,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb className="iot--bar-chart-container" >
diff --git a/src/components/Dashboard/__snapshots__/DashboardGrid.story.storyshot b/src/components/Dashboard/__snapshots__/DashboardGrid.story.storyshot index 00158d4642..0bf8a1be20 100644 --- a/src/components/Dashboard/__snapshots__/DashboardGrid.story.storyshot +++ b/src/components/Dashboard/__snapshots__/DashboardGrid.story.storyshot @@ -2965,7 +2965,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb className="iot--bar-chart-container" >
diff --git a/yarn.lock b/yarn.lock index 7e4662310f..10ed5e9166 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2527,28 +2527,17 @@ resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39" integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw== -"@carbon/charts-react@^0.40.13": - version "0.40.13" - resolved "https://registry.yarnpkg.com/@carbon/charts-react/-/charts-react-0.40.13.tgz#05c65264b071bb266f9ad26cfd6067b6bf88327c" - integrity sha512-N8ffq5OWZxNs4DL2wV9CAR0Tvvqs18uvdSKBLBUrnXB8plPHq4FEcHvuGt2fdTBuOJizn1HQVLgisxCR1XHaJg== +"@carbon/charts-react@^0.41.6": + version "0.41.6" + resolved "https://registry.yarnpkg.com/@carbon/charts-react/-/charts-react-0.41.6.tgz#b7ae3df2146dc8a0170274f62a66f8a9afcc4236" + integrity sha512-7xLuahG+pIsUz0jXHU59KeMKQKeLTmKDVUmw3jlk7iln5yVU38mZ+dPd/o+DYRrB+XypsHtpnSikUtMJ3+B79Q== dependencies: - "@carbon/charts" "^0.40.13" + "@carbon/charts" "^0.41.6" -"@carbon/charts@^0.40.13": - version "0.40.13" - resolved "https://registry.yarnpkg.com/@carbon/charts/-/charts-0.40.13.tgz#c54af1dd613dc063782a9780df779d450a582844" - integrity sha512-aE56iKjjVeSFs9+DBF48fPIuBSfxDMSMquSPLPRDJp5rWjkdOeqgVtG7TEqSTOB8cvpvUt+LdPSKE9ufUrGceQ== - dependencies: - "@carbon/colors" "10.4.0" - "@carbon/utils-position" "1.1.1" - date-fns "2.8.1" - lodash-es "4.17.15" - resize-observer-polyfill "1.5.0" - -"@carbon/charts@^0.41.1": - version "0.41.1" - resolved "https://registry.yarnpkg.com/@carbon/charts/-/charts-0.41.1.tgz#766ad4ed306ad3df0b4fa3a4e97dec9cdd649f55" - integrity sha512-nCWNMOsiV0E0Tdulf9TcsUSFvkhY5onkdqfZ8NEKX40LQzSWO/nGG1fRAlPxfZpFDuZr7rAW9l0/Z8W5QzkddQ== +"@carbon/charts@^0.41.6": + version "0.41.6" + resolved "https://registry.yarnpkg.com/@carbon/charts/-/charts-0.41.6.tgz#dd76b04abdaf691e0f94e542e63d0061e2849184" + integrity sha512-dct2zxdqujsaE3/wZE2NvWc/rlaXmLb9HaENCIyacaRZH4huHv3LaBkBvx/G31Vdoje/Addi37ZUqGlUlv4/mg== dependencies: "@carbon/colors" "10.15.0" "@carbon/utils-position" "1.1.1" @@ -2561,11 +2550,6 @@ resolved "https://registry.yarnpkg.com/@carbon/colors/-/colors-10.15.0.tgz#1a7f211a9e92b51c838995f5f3ffae002a3fed8b" integrity sha512-z6Ur7unTO6XoVVujXnGcvxxDaX1g5ccCqImlb/HtJHtF7WFCQVjpxKKn76XcmI3PRZ2tbc9q+ENpfbS5Ry/NBQ== -"@carbon/colors@10.4.0": - version "10.4.0" - resolved "https://registry.yarnpkg.com/@carbon/colors/-/colors-10.4.0.tgz#8c21127926bc389dcb4d415b55d4eae278f3d525" - integrity sha512-UERU07hWXAjsaWu6JPJDyJnwVLkJr+8wTvFrbCkubCfl/MZjKoyLgz0CNypu8hSg8ZaDUzl/NfXMgRpprzuSjQ== - "@carbon/colors@^10.11.0": version "10.11.0" resolved "https://registry.yarnpkg.com/@carbon/colors/-/colors-10.11.0.tgz#060dce87ddfaabe313ad85d677962e92cf6184a1" From c0bf24c43aaa5ba6149e4629c31895ddec22c214 Mon Sep 17 00:00:00 2001 From: Stephen Stone Date: Wed, 25 Nov 2020 12:06:23 -0600 Subject: [PATCH 22/23] test: update snapshots --- .../__snapshots__/Dashboard.story.storyshot | 24 +++++----- .../DashboardGrid.story.storyshot | 4 +- .../DashboardEditor.story.storyshot | 4 +- .../PieChartCard.story.storyshot | 12 ++--- .../TimeSeriesCard.story.storyshot | 48 +++++++++---------- 5 files changed, 46 insertions(+), 46 deletions(-) diff --git a/src/components/Dashboard/__snapshots__/Dashboard.story.storyshot b/src/components/Dashboard/__snapshots__/Dashboard.story.storyshot index c10ab6d37b..e25b02ddc6 100644 --- a/src/components/Dashboard/__snapshots__/Dashboard.story.storyshot +++ b/src/components/Dashboard/__snapshots__/Dashboard.story.storyshot @@ -1336,7 +1336,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb className="iot--time-series-card--wrapper" >
@@ -2008,7 +2008,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb className="iot--time-series-card--wrapper" >
@@ -3755,7 +3755,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb className="iot--time-series-card--wrapper" >
@@ -4427,7 +4427,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb className="iot--time-series-card--wrapper" >
@@ -6202,7 +6202,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb className="iot--time-series-card--wrapper" >
@@ -6874,7 +6874,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb className="iot--time-series-card--wrapper" >
@@ -7898,7 +7898,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb className="iot--time-series-card--wrapper" >
@@ -11226,7 +11226,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb className="iot--time-series-card--wrapper" >
@@ -11898,7 +11898,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb className="iot--time-series-card--wrapper" >
@@ -12419,7 +12419,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb className="iot--time-series-card--wrapper" >
@@ -26048,7 +26048,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb className="iot--time-series-card--wrapper" >
@@ -26720,7 +26720,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb className="iot--time-series-card--wrapper" >
diff --git a/src/components/Dashboard/__snapshots__/DashboardGrid.story.storyshot b/src/components/Dashboard/__snapshots__/DashboardGrid.story.storyshot index 0bf8a1be20..5bd61b4ab8 100644 --- a/src/components/Dashboard/__snapshots__/DashboardGrid.story.storyshot +++ b/src/components/Dashboard/__snapshots__/DashboardGrid.story.storyshot @@ -971,7 +971,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb className="iot--pie-chart-container" >
diff --git a/src/components/DashboardEditor/__snapshots__/DashboardEditor.story.storyshot b/src/components/DashboardEditor/__snapshots__/DashboardEditor.story.storyshot index b703bed193..96e5d8b234 100644 --- a/src/components/DashboardEditor/__snapshots__/DashboardEditor.story.storyshot +++ b/src/components/DashboardEditor/__snapshots__/DashboardEditor.story.storyshot @@ -4569,7 +4569,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper className="iot--time-series-card--wrapper iot--time-series-card--wrapper__editable" >
@@ -6961,7 +6961,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper className="iot--time-series-card--wrapper iot--time-series-card--wrapper__editable" >
diff --git a/src/components/PieChartCard/__snapshots__/PieChartCard.story.storyshot b/src/components/PieChartCard/__snapshots__/PieChartCard.story.storyshot index c774cdafc5..06f8560a18 100644 --- a/src/components/PieChartCard/__snapshots__/PieChartCard.story.storyshot +++ b/src/components/PieChartCard/__snapshots__/PieChartCard.story.storyshot @@ -93,7 +93,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/PieCh className="iot--pie-chart-container iot--pie-chart-container__expanded" >
@@ -752,7 +752,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/PieCh className="iot--pie-chart-container" >
@@ -875,7 +875,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/PieCh className="iot--pie-chart-container" >
@@ -998,7 +998,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/PieCh className="iot--pie-chart-container" >
@@ -1247,7 +1247,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/PieCh className="iot--pie-chart-container" >
diff --git a/src/components/TimeSeriesCard/__snapshots__/TimeSeriesCard.story.storyshot b/src/components/TimeSeriesCard/__snapshots__/TimeSeriesCard.story.storyshot index d2318f62d0..69e05c0da0 100644 --- a/src/components/TimeSeriesCard/__snapshots__/TimeSeriesCard.story.storyshot +++ b/src/components/TimeSeriesCard/__snapshots__/TimeSeriesCard.story.storyshot @@ -135,7 +135,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/TimeS className="iot--time-series-card--wrapper" >
@@ -303,7 +303,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/TimeS className="iot--time-series-card--wrapper" >
@@ -442,7 +442,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/TimeS className="iot--time-series-card--wrapper" >
@@ -781,7 +781,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/TimeS className="iot--time-series-card--wrapper" >
@@ -949,7 +949,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/TimeS className="iot--time-series-card--wrapper iot--time-series-card--wrapper__lots-of-points" >
@@ -1042,7 +1042,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/TimeS className="iot--time-series-card--wrapper iot--time-series-card--wrapper__editable" >
@@ -1213,7 +1213,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/TimeS className="iot--time-series-card--wrapper iot--time-series-card--wrapper__expanded" >
@@ -3434,7 +3434,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/TimeS className="iot--time-series-card--wrapper" >
@@ -3602,7 +3602,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/TimeS className="iot--time-series-card--wrapper" >
@@ -3770,7 +3770,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/TimeS className="iot--time-series-card--wrapper" >
@@ -3938,7 +3938,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/TimeS className="iot--time-series-card--wrapper" >
@@ -4106,7 +4106,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/TimeS className="iot--time-series-card--wrapper" >
@@ -4274,7 +4274,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/TimeS className="iot--time-series-card--wrapper" >
@@ -4442,7 +4442,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/TimeS className="iot--time-series-card--wrapper" >
@@ -4772,7 +4772,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/TimeS className="iot--time-series-card--wrapper" >
@@ -4940,7 +4940,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/TimeS className="iot--time-series-card--wrapper" >
@@ -5108,7 +5108,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/TimeS className="iot--time-series-card--wrapper" >
@@ -5276,7 +5276,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/TimeS className="iot--time-series-card--wrapper" >
@@ -5444,7 +5444,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/TimeS className="iot--time-series-card--wrapper" >
@@ -5612,7 +5612,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/TimeS className="iot--time-series-card--wrapper" >
@@ -5780,7 +5780,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/TimeS className="iot--time-series-card--wrapper" >
@@ -5948,7 +5948,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/TimeS className="iot--time-series-card--wrapper" >
@@ -6116,7 +6116,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/TimeS className="iot--time-series-card--wrapper" >
From 3c304fe7f5aeb4ef82cbe2ea4280178993e964d4 Mon Sep 17 00:00:00 2001 From: Scott Dickerson Date: Mon, 30 Nov 2020 11:09:47 -0600 Subject: [PATCH 23/23] test(charts): update chart testcases to pass coverage threshold and use mock --- .../BarChartCard/BarChartCard.test.jsx | 12 ++--- .../__snapshots__/Dashboard.story.storyshot | 24 +++++----- .../DashboardGrid.story.storyshot | 4 +- .../DashboardEditor.story.storyshot | 4 +- .../PieChartCard/PieChartCard.test.jsx | 2 + .../PieChartCard.story.storyshot | 12 ++--- .../TimeSeriesCard/TimeSeriesCard.test.jsx | 34 +++++++++++-- .../TimeSeriesCard.story.storyshot | 48 +++++++++---------- 8 files changed, 83 insertions(+), 57 deletions(-) diff --git a/src/components/BarChartCard/BarChartCard.test.jsx b/src/components/BarChartCard/BarChartCard.test.jsx index 07c49e8213..8cedbc54be 100644 --- a/src/components/BarChartCard/BarChartCard.test.jsx +++ b/src/components/BarChartCard/BarChartCard.test.jsx @@ -50,7 +50,7 @@ describe('BarChartCard', () => { it('does not show bar chart when loading', () => { const wrapper = mount(); - expect(wrapper.find('SimpleBarChart')).toHaveLength(0); + expect(wrapper.find('#mock-bar-chart-simple')).toHaveLength(0); }); it('does not show bar chart when empty data', () => { @@ -60,7 +60,7 @@ describe('BarChartCard', () => { values={barChartData.quarters.filter((q) => q.quarter === 'NOT_VALID')} /> ); - expect(wrapper.find('SimpleBarChart')).toHaveLength(0); + expect(wrapper.find('#mock-bar-chart-simple')).toHaveLength(0); }); it('shows table when isExpanded', () => { @@ -103,7 +103,7 @@ describe('BarChartCard', () => { values={barChartData.quarters.filter((a) => a.quarter === '2020-Q1')} /> ); - expect(wrapper.find('GroupedBarChart')).toHaveLength(1); + expect(wrapper.find('#mock-bar-chart-grouped')).toHaveLength(1); }); it('shows stackedBarChart', () => { @@ -130,7 +130,7 @@ describe('BarChartCard', () => { values={barChartData.quarters.filter((a) => a.quarter === '2020-Q3')} /> ); - expect(wrapper.find('StackedBarChart')).toHaveLength(1); + expect(wrapper.find('#mock-bar-chart-stacked')).toHaveLength(1); }); it('shows a timeSeries chart', () => { @@ -152,7 +152,7 @@ describe('BarChartCard', () => { values={barChartData.timestamps.filter((t) => t.city === 'Amsterdam')} /> ); - expect(wrapper.find('StackedBarChart')).toHaveLength(1); + expect(wrapper.find('#mock-bar-chart-stacked')).toHaveLength(1); }); it('shows a horizontal chart', () => { @@ -180,7 +180,7 @@ describe('BarChartCard', () => { values={barChartData.quarters.filter((a) => a.quarter === '2020-Q1')} /> ); - expect(wrapper.find('GroupedBarChart')).toHaveLength(1); + expect(wrapper.find('#mock-bar-chart-grouped')).toHaveLength(1); }); it('i18n string test', () => { diff --git a/src/components/Dashboard/__snapshots__/Dashboard.story.storyshot b/src/components/Dashboard/__snapshots__/Dashboard.story.storyshot index c10ab6d37b..e25b02ddc6 100644 --- a/src/components/Dashboard/__snapshots__/Dashboard.story.storyshot +++ b/src/components/Dashboard/__snapshots__/Dashboard.story.storyshot @@ -1336,7 +1336,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb className="iot--time-series-card--wrapper" >
@@ -2008,7 +2008,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb className="iot--time-series-card--wrapper" >
@@ -3755,7 +3755,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb className="iot--time-series-card--wrapper" >
@@ -4427,7 +4427,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb className="iot--time-series-card--wrapper" >
@@ -6202,7 +6202,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb className="iot--time-series-card--wrapper" >
@@ -6874,7 +6874,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb className="iot--time-series-card--wrapper" >
@@ -7898,7 +7898,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb className="iot--time-series-card--wrapper" >
@@ -11226,7 +11226,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb className="iot--time-series-card--wrapper" >
@@ -11898,7 +11898,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb className="iot--time-series-card--wrapper" >
@@ -12419,7 +12419,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb className="iot--time-series-card--wrapper" >
@@ -26048,7 +26048,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb className="iot--time-series-card--wrapper" >
@@ -26720,7 +26720,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb className="iot--time-series-card--wrapper" >
diff --git a/src/components/Dashboard/__snapshots__/DashboardGrid.story.storyshot b/src/components/Dashboard/__snapshots__/DashboardGrid.story.storyshot index 0bf8a1be20..5bd61b4ab8 100644 --- a/src/components/Dashboard/__snapshots__/DashboardGrid.story.storyshot +++ b/src/components/Dashboard/__snapshots__/DashboardGrid.story.storyshot @@ -971,7 +971,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb className="iot--pie-chart-container" >
diff --git a/src/components/DashboardEditor/__snapshots__/DashboardEditor.story.storyshot b/src/components/DashboardEditor/__snapshots__/DashboardEditor.story.storyshot index b703bed193..96e5d8b234 100644 --- a/src/components/DashboardEditor/__snapshots__/DashboardEditor.story.storyshot +++ b/src/components/DashboardEditor/__snapshots__/DashboardEditor.story.storyshot @@ -4569,7 +4569,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper className="iot--time-series-card--wrapper iot--time-series-card--wrapper__editable" >
@@ -6961,7 +6961,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT Exper className="iot--time-series-card--wrapper iot--time-series-card--wrapper__editable" >
diff --git a/src/components/PieChartCard/PieChartCard.test.jsx b/src/components/PieChartCard/PieChartCard.test.jsx index f5535f4eb0..4a70a4c95a 100644 --- a/src/components/PieChartCard/PieChartCard.test.jsx +++ b/src/components/PieChartCard/PieChartCard.test.jsx @@ -8,6 +8,8 @@ import Table from '../Table/Table'; import PieChartCard, { formatColors } from './PieChartCard'; +jest.unmock('@carbon/charts-react/pie-chart'); + const chartDataExample = [ { group: '2V2N 9KYPM', diff --git a/src/components/PieChartCard/__snapshots__/PieChartCard.story.storyshot b/src/components/PieChartCard/__snapshots__/PieChartCard.story.storyshot index c774cdafc5..06f8560a18 100644 --- a/src/components/PieChartCard/__snapshots__/PieChartCard.story.storyshot +++ b/src/components/PieChartCard/__snapshots__/PieChartCard.story.storyshot @@ -93,7 +93,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/PieCh className="iot--pie-chart-container iot--pie-chart-container__expanded" >
@@ -752,7 +752,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/PieCh className="iot--pie-chart-container" >
@@ -875,7 +875,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/PieCh className="iot--pie-chart-container" >
@@ -998,7 +998,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/PieCh className="iot--pie-chart-container" >
@@ -1247,7 +1247,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/PieCh className="iot--pie-chart-container" >
diff --git a/src/components/TimeSeriesCard/TimeSeriesCard.test.jsx b/src/components/TimeSeriesCard/TimeSeriesCard.test.jsx index f08706409e..bbc30e6808 100644 --- a/src/components/TimeSeriesCard/TimeSeriesCard.test.jsx +++ b/src/components/TimeSeriesCard/TimeSeriesCard.test.jsx @@ -5,7 +5,12 @@ import omit from 'lodash/omit'; import Table from '../Table/Table'; import { getIntervalChartData } from '../../utils/sample'; -import { CARD_SIZES, COLORS } from '../../constants/LayoutConstants'; +import { + CARD_SIZES, + COLORS, + TIME_SERIES_TYPES, +} from '../../constants/LayoutConstants'; +import { CHART_COLORS } from '../../constants/CardPropTypes'; import { barChartData } from '../../utils/barChartDataSample'; import TimeSeriesCard, { @@ -46,13 +51,13 @@ describe('TimeSeriesCard', () => { size={CARD_SIZES.MEDIUM} /> ); - expect(wrapper.find('LineChart')).toHaveLength(0); + expect(wrapper.find('#mock-line-chart')).toHaveLength(0); expect(wrapper.find('SkeletonText')).toHaveLength(1); wrapper = mount( ); - expect(wrapper.find('LineChart')).toHaveLength(1); + expect(wrapper.find('#mock-line-chart')).toHaveLength(1); expect(wrapper.find('SkeletonText')).toHaveLength(0); }); it('does not fail to render if no data is given', () => { @@ -79,11 +84,25 @@ describe('TimeSeriesCard', () => { size={CARD_SIZES.MEDIUMTHIN} /> ); - expect(wrapper.find('LineChart')).toHaveLength(1); + expect(wrapper.find('#mock-line-chart')).toHaveLength(1); // Carbon Table should be there expect(wrapper.find(Table)).toHaveLength(1); }); + it('type bar shows', () => { + const wrapper = mount( + + ); + expect(wrapper.find('#mock-bar-chart-stacked')).toHaveLength(1); + }); + it('handleTooltip should add date', () => { const defaultTooltip = '
  • existing tooltip
'; // the date is from 2017 @@ -184,7 +203,7 @@ describe('TimeSeriesCard', () => { const wrapper = mount( ); - expect(wrapper.find('LineChart')).toHaveLength(1); + expect(wrapper.find('#mock-line-chart')).toHaveLength(1); }); it('formatChartData returns properly formatted data without dataFilter set', () => { const series = [ @@ -398,6 +417,11 @@ describe('TimeSeriesCard', () => { expect(formatColors(series)).toEqual({ scale: { Amsterdam: 'blue' }, }); + + // Default color should be used if no color is passed + expect(formatColors(omit(series, 'color'))).toEqual({ + scale: { Amsterdam: CHART_COLORS[0] }, + }); }); it('tableColumn headers should use the label, not the dataSourceId', () => { render( diff --git a/src/components/TimeSeriesCard/__snapshots__/TimeSeriesCard.story.storyshot b/src/components/TimeSeriesCard/__snapshots__/TimeSeriesCard.story.storyshot index d2318f62d0..69e05c0da0 100644 --- a/src/components/TimeSeriesCard/__snapshots__/TimeSeriesCard.story.storyshot +++ b/src/components/TimeSeriesCard/__snapshots__/TimeSeriesCard.story.storyshot @@ -135,7 +135,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/TimeS className="iot--time-series-card--wrapper" >
@@ -303,7 +303,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/TimeS className="iot--time-series-card--wrapper" >
@@ -442,7 +442,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/TimeS className="iot--time-series-card--wrapper" >
@@ -781,7 +781,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/TimeS className="iot--time-series-card--wrapper" >
@@ -949,7 +949,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/TimeS className="iot--time-series-card--wrapper iot--time-series-card--wrapper__lots-of-points" >
@@ -1042,7 +1042,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/TimeS className="iot--time-series-card--wrapper iot--time-series-card--wrapper__editable" >
@@ -1213,7 +1213,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/TimeS className="iot--time-series-card--wrapper iot--time-series-card--wrapper__expanded" >
@@ -3434,7 +3434,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/TimeS className="iot--time-series-card--wrapper" >
@@ -3602,7 +3602,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/TimeS className="iot--time-series-card--wrapper" >
@@ -3770,7 +3770,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/TimeS className="iot--time-series-card--wrapper" >
@@ -3938,7 +3938,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/TimeS className="iot--time-series-card--wrapper" >
@@ -4106,7 +4106,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/TimeS className="iot--time-series-card--wrapper" >
@@ -4274,7 +4274,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/TimeS className="iot--time-series-card--wrapper" >
@@ -4442,7 +4442,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/TimeS className="iot--time-series-card--wrapper" >
@@ -4772,7 +4772,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/TimeS className="iot--time-series-card--wrapper" >
@@ -4940,7 +4940,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/TimeS className="iot--time-series-card--wrapper" >
@@ -5108,7 +5108,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/TimeS className="iot--time-series-card--wrapper" >
@@ -5276,7 +5276,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/TimeS className="iot--time-series-card--wrapper" >
@@ -5444,7 +5444,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/TimeS className="iot--time-series-card--wrapper" >
@@ -5612,7 +5612,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/TimeS className="iot--time-series-card--wrapper" >
@@ -5780,7 +5780,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/TimeS className="iot--time-series-card--wrapper" >
@@ -5948,7 +5948,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/TimeS className="iot--time-series-card--wrapper" >
@@ -6116,7 +6116,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/TimeS className="iot--time-series-card--wrapper" >