From 71c2d77e2ba868b09883f868cdb482c9f29e23f7 Mon Sep 17 00:00:00 2001 From: Davide Valleri <146823822+dvalleri@users.noreply.github.com> Date: Mon, 15 Jul 2024 12:47:04 +0200 Subject: [PATCH] refactor(ui): align charts common style (#101) * refactor(ui): align numerical charts for all modelType * refactor(ui): fix datapoint section for all modelType * refactor(ui): improve charts option in modelQuality * reafctor(ui): update version of @radicalbit/radicalbit-design-system * feat(ui): update radicalbit/radicalbit-design-system version * feat(ui): update yarn.lock --- ui/package.json | 2 +- .../numerical/chart/options.js | 2 + .../numerical/chart/options.js | 2 + .../data-point-distribution/options.js | 11 +--- .../numerical/chart/options.js | 10 +--- .../class-chart-metrics/chart.jsx | 4 +- .../class-chart-metrics/index.jsx | 31 ++++------ .../class-chart-metrics/options.js | 36 +++--------- .../data-point-distribution/options.js | 21 +------ .../numerical/chart/options.js | 10 +--- .../data-point-distribution/index.jsx | 4 +- .../data-point-distribution/options.js | 2 + .../numerical/chart/options.js | 2 + .../data-point-distribution/index.jsx | 2 +- .../data-point-distribution/options.js | 2 + .../numerical/chart/options.js | 2 + ui/src/helpers/common-chart-options.js | 58 +++++++++++++++++-- ui/yarn.lock | 28 +++++++-- 18 files changed, 116 insertions(+), 113 deletions(-) diff --git a/ui/package.json b/ui/package.json index b417f1d2..4d09a589 100644 --- a/ui/package.json +++ b/ui/package.json @@ -16,7 +16,7 @@ "dependencies": { "@fortawesome/free-solid-svg-icons": "^6.5.2", "@radicalbit/formbit": "1.0.0", - "@radicalbit/radicalbit-design-system": "1.0.0", + "@radicalbit/radicalbit-design-system": "1.1.0", "@reduxjs/toolkit": "^2.2.4", "@vitejs/plugin-react": "^4.2.1", "ace-builds": "^1.33.2", diff --git a/ui/src/container/models/Details/binary-classification/current/data-quality/data-quality-list/numerical/chart/options.js b/ui/src/container/models/Details/binary-classification/current/data-quality/data-quality-list/numerical/chart/options.js index c3888c04..f2113946 100644 --- a/ui/src/container/models/Details/binary-classification/current/data-quality/data-quality-list/numerical/chart/options.js +++ b/ui/src/container/models/Details/binary-classification/current/data-quality/data-quality-list/numerical/chart/options.js @@ -13,6 +13,7 @@ export default function chartOptions(dataset, referenceColor, currentColor) { ...commonChartOptions.gridOptions(CHART_TYPE.BAR), ...commonChartOptions.xAxisOptions(OPTIONS_TYPE.CATEGORY, xAxisData), ...commonChartOptions.yAxisOptions(OPTIONS_TYPE.VALUE), + ...commonChartOptions.commonOptions(CHART_TYPE.BAR), series: [ commonChartOptions.seriesOptions(CHART_TYPE.BAR, 'reference', referenceColor, dataset.referenceValues), commonChartOptions.seriesOptions(CHART_TYPE.BAR, 'current', currentColor, dataset.currentValues), @@ -20,6 +21,7 @@ export default function chartOptions(dataset, referenceColor, currentColor) { }; options.xAxis.axisLabel.rotate = 20; + options.barCategoryGap = '0'; return options; } diff --git a/ui/src/container/models/Details/binary-classification/reference/data-quality/data-quality-list/numerical/chart/options.js b/ui/src/container/models/Details/binary-classification/reference/data-quality/data-quality-list/numerical/chart/options.js index 197326cb..1cc08bbc 100644 --- a/ui/src/container/models/Details/binary-classification/reference/data-quality/data-quality-list/numerical/chart/options.js +++ b/ui/src/container/models/Details/binary-classification/reference/data-quality/data-quality-list/numerical/chart/options.js @@ -13,12 +13,14 @@ export default function chartOptions(dataset, color) { ...commonChartOptions.gridOptions(CHART_TYPE.BAR), ...commonChartOptions.xAxisOptions(OPTIONS_TYPE.CATEGORY, xAxisData), ...commonChartOptions.yAxisOptions(OPTIONS_TYPE.VALUE), + ...commonChartOptions.commonOptions(CHART_TYPE.BAR), series: [ commonChartOptions.seriesOptions(CHART_TYPE.BAR, 'reference', color, dataset.referenceValues), ], }; options.xAxis.axisLabel.rotate = 20; + options.barCategoryGap = '0'; return options; } diff --git a/ui/src/container/models/Details/multi-classification/current/data-quality/data-point-distribution/options.js b/ui/src/container/models/Details/multi-classification/current/data-quality/data-point-distribution/options.js index 7d8664df..8b590991 100644 --- a/ui/src/container/models/Details/multi-classification/current/data-quality/data-point-distribution/options.js +++ b/ui/src/container/models/Details/multi-classification/current/data-quality/data-point-distribution/options.js @@ -17,24 +17,15 @@ export default function chartOptions(title, referenceDataset, currentDataset) { series: [ { ...commonChartOptions.seriesOptions(CHART_TYPE.BAR, title, CHART_COLOR.REFERENCE_LIGHT, referenceData), - color: CHART_COLOR.REFERENCE_LIGHT, }, { ...commonChartOptions.seriesOptions(CHART_TYPE.BAR, `${title}_current`, CHART_COLOR.CURRENT_LIGHT, currentData), - color: CHART_COLOR.CURRENT_LIGHT, }, ], }; if (currentData.length >= 20 || referenceData.length >= 20) { - options.dataZoom = [ - { - show: true, - }, - { - type: 'inside', - }, - ]; + options.dataZoom = commonChartOptions.dataZoomOptions(); options.grid.bottom = 40; } diff --git a/ui/src/container/models/Details/multi-classification/current/data-quality/data-quality-list/numerical/chart/options.js b/ui/src/container/models/Details/multi-classification/current/data-quality/data-quality-list/numerical/chart/options.js index 91e8c49f..f2113946 100644 --- a/ui/src/container/models/Details/multi-classification/current/data-quality/data-quality-list/numerical/chart/options.js +++ b/ui/src/container/models/Details/multi-classification/current/data-quality/data-quality-list/numerical/chart/options.js @@ -13,14 +13,7 @@ export default function chartOptions(dataset, referenceColor, currentColor) { ...commonChartOptions.gridOptions(CHART_TYPE.BAR), ...commonChartOptions.xAxisOptions(OPTIONS_TYPE.CATEGORY, xAxisData), ...commonChartOptions.yAxisOptions(OPTIONS_TYPE.VALUE), - - barCategoryGap: '0', - barGap: 0, - itemStyle: { - borderWidth: 1, - borderColor: 'rgba(201, 25, 25, 1)', - }, - + ...commonChartOptions.commonOptions(CHART_TYPE.BAR), series: [ commonChartOptions.seriesOptions(CHART_TYPE.BAR, 'reference', referenceColor, dataset.referenceValues), commonChartOptions.seriesOptions(CHART_TYPE.BAR, 'current', currentColor, dataset.currentValues), @@ -28,6 +21,7 @@ export default function chartOptions(dataset, referenceColor, currentColor) { }; options.xAxis.axisLabel.rotate = 20; + options.barCategoryGap = '0'; return options; } diff --git a/ui/src/container/models/Details/multi-classification/current/model-quality/class-chart-metrics/chart.jsx b/ui/src/container/models/Details/multi-classification/current/model-quality/class-chart-metrics/chart.jsx index c9c7da0f..234a678a 100644 --- a/ui/src/container/models/Details/multi-classification/current/model-quality/class-chart-metrics/chart.jsx +++ b/ui/src/container/models/Details/multi-classification/current/model-quality/class-chart-metrics/chart.jsx @@ -28,7 +28,7 @@ echarts.use([ ]); function LineChart({ - title, color, currentData, referenceData = [], + title, currentData, referenceData = [], }) { const handleOnChartReady = (echart) => { // To handle the second opening of a modal when the rtkq hook read from cache @@ -48,7 +48,7 @@ function LineChart({ echarts={echarts} notMerge onChartReady={handleOnChartReady} - option={lineChartOptions(color, currentData, referenceData)} + option={lineChartOptions(currentData, referenceData)} style={{ height: '24rem' }} /> )} diff --git a/ui/src/container/models/Details/multi-classification/current/model-quality/class-chart-metrics/index.jsx b/ui/src/container/models/Details/multi-classification/current/model-quality/class-chart-metrics/index.jsx index 00831e32..28b710ff 100644 --- a/ui/src/container/models/Details/multi-classification/current/model-quality/class-chart-metrics/index.jsx +++ b/ui/src/container/models/Details/multi-classification/current/model-quality/class-chart-metrics/index.jsx @@ -1,5 +1,4 @@ import { MODEL_QUALITY_FIELD } from '@Container/models/Details/constants'; -import { CHART_COLOR } from '@Helpers/common-chart-options'; import useGetDataCharts from '../use-get-data-charts'; import LineChart from './chart'; @@ -22,9 +21,8 @@ function MulticlassChartMetrics() { function RecallChart() { const items = useGetDataCharts(); - const cappedSeries = items; - const currentSeries = cappedSeries.map(({ className, currentData }) => ({ className, data: currentData.recall })); - const referenceSeries = cappedSeries.map(({ className, referenceData, currentData }) => ({ + const currentSeries = items.map(({ className, currentData }) => ({ className, data: currentData.recall })); + const referenceSeries = items.map(({ className, referenceData, currentData }) => ({ className, data: currentData.recall.map((o) => ({ timestamp: o.timestamp, @@ -34,7 +32,6 @@ function RecallChart() { return ( ({ className, data: currentData.fMeasure })); - const referenceSeries = cappedSeries.map(({ className, referenceData, currentData }) => ({ + const currentSeries = items.map(({ className, currentData }) => ({ className, data: currentData.fMeasure })); + const referenceSeries = items.map(({ className, referenceData, currentData }) => ({ className, data: currentData.fMeasure.map((o) => ({ timestamp: o.timestamp, @@ -57,7 +53,6 @@ function F1MeasureChart() { return ( ({ className, data: currentData.precision })); - const referenceSeries = cappedSeries.map(({ className, referenceData, currentData }) => ({ + const currentSeries = items.map(({ className, currentData }) => ({ className, data: currentData.precision })); + const referenceSeries = items.map(({ className, referenceData, currentData }) => ({ className, data: currentData.precision.map((o) => ({ timestamp: o.timestamp, @@ -80,7 +74,6 @@ function PrecisionChart() { return ( ({ className, data: currentData.falsePositiveRate })); - const referenceSeries = cappedSeries.map(({ className, referenceData, currentData }) => ({ + const currentSeries = items.map(({ className, currentData }) => ({ className, data: currentData.falsePositiveRate })); + const referenceSeries = items.map(({ className, referenceData, currentData }) => ({ className, data: currentData.falsePositiveRate.map((o) => ({ timestamp: o.timestamp, @@ -103,7 +95,6 @@ function FalsePositiveRateChart() { return ( ({ className, data: currentData.truePositiveRate })); + const currentSeries = items.map(({ className, currentData }) => ({ className, data: currentData.truePositiveRate })); - const referenceSeries = cappedSeries.map(({ className, referenceData, currentData }) => ({ + const referenceSeries = items.map(({ className, referenceData, currentData }) => ({ className, data: currentData.truePositiveRate.map((o) => ({ timestamp: o.timestamp, @@ -127,7 +117,6 @@ function TruePositiveRateChart() { return ( { const currentSeries = el.data.map(({ timestamp, value }) => [timestamp, numberFormatter().format(value)]); return commonChartOptions.seriesOptions(CHART_TYPE.LINE, el.className, null, currentSeries); }); + const legendLabel = dataSeries.map(({ name }) => name); + if (referenceDataset) { const series = referenceDataset.map((el) => { const referenceSeries = el.data.map(({ timestamp, value }) => [timestamp, numberFormatter().format(value)]); @@ -31,38 +33,13 @@ export default function lineChartOptions(color, currentDataset, referenceDataset } const options = { - // color: [color], ...commonChartOptions.yAxisOptions(OPTIONS_TYPE.VALUE), ...commonChartOptions.xAxisOptions(OPTIONS_TYPE.TIME), ...commonChartOptions.gridOptions(CHART_TYPE.LINE), ...commonChartOptions.colorList, - series: dataSeries, - - tooltip: { - trigger: 'axis', - }, - - emphasis: { - focus: 'series', - }, - legend: { - right: 0, - top: 16, - bottom: 0, - orient: 'vertical', - type: 'scroll', - scrollDataIndex: 'scroll', - pageIconSize: 8, - pageTextStyle: { - fontSize: 8, - }, - data: dataSeries.map(({ name }) => name), - textStyle: { - fontSize: 10, - fontWeight: '300', - }, - }, - + ...commonChartOptions.legendOptions(legendLabel), + tooltip: { trigger: 'axis' }, + emphasis: { focus: 'series' }, title: { text: '••• Reference', textStyle: { @@ -72,6 +49,7 @@ export default function lineChartOptions(color, currentDataset, referenceDataset right: 0, }, + series: dataSeries, }; options.grid.right = 140; diff --git a/ui/src/container/models/Details/multi-classification/reference/data-quality/data-point-distribution/options.js b/ui/src/container/models/Details/multi-classification/reference/data-quality/data-point-distribution/options.js index 00eb9b46..a657a6a9 100644 --- a/ui/src/container/models/Details/multi-classification/reference/data-quality/data-point-distribution/options.js +++ b/ui/src/container/models/Details/multi-classification/reference/data-quality/data-point-distribution/options.js @@ -1,6 +1,5 @@ -import { CHART_COLOR, CHART_TYPE, OPTIONS_TYPE } from '@Helpers/common-chart-options'; -import { numberFormatter } from '@Src/constants'; import * as commonChartOptions from '@Helpers/common-chart-options'; +import { CHART_COLOR, CHART_TYPE, OPTIONS_TYPE } from '@Helpers/common-chart-options'; export default function chartOptions(title, dataset) { const xAxisLabel = dataset?.map(({ name }) => name); @@ -16,28 +15,12 @@ export default function chartOptions(title, dataset) { series: [ { ...commonChartOptions.seriesOptions(CHART_TYPE.BAR, title, CHART_COLOR.REFERENCE_LIGHT, referenceData), - color: CHART_COLOR.REFERENCE_LIGHT, - label: { - show: false, - position: 'top', - fontWeight: 'bold', - rotate: 45, - offset: [25, 5], - formatter: (el) => (el.data.count > 0) ? `${el.data.count} (${numberFormatter().format(el.data.percentage)}%)` : '', - }, }, ], }; if (referenceData.length >= 30) { - options.dataZoom = [ - { - show: true, - }, - { - type: 'inside', - }, - ]; + options.dataZoom = commonChartOptions.dataZoomOptions(); options.grid.bottom = 40; } diff --git a/ui/src/container/models/Details/multi-classification/reference/data-quality/data-quality-list/numerical/chart/options.js b/ui/src/container/models/Details/multi-classification/reference/data-quality/data-quality-list/numerical/chart/options.js index 6b959c0b..2ea99f74 100644 --- a/ui/src/container/models/Details/multi-classification/reference/data-quality/data-quality-list/numerical/chart/options.js +++ b/ui/src/container/models/Details/multi-classification/reference/data-quality/data-quality-list/numerical/chart/options.js @@ -13,20 +13,14 @@ export default function chartOptions(dataset, color) { ...commonChartOptions.gridOptions(CHART_TYPE.BAR), ...commonChartOptions.xAxisOptions(OPTIONS_TYPE.CATEGORY, xAxisData), ...commonChartOptions.yAxisOptions(OPTIONS_TYPE.VALUE), - - barCategoryGap: '0', - barGap: 0, - itemStyle: { - borderWidth: 1, - borderColor: 'rgba(201, 25, 25, 1)', - }, - + ...commonChartOptions.commonOptions(CHART_TYPE.BAR), series: [ commonChartOptions.seriesOptions(CHART_TYPE.BAR, 'reference', color, dataset.referenceValues), ], }; options.xAxis.axisLabel.rotate = 20; + options.barCategoryGap = '0'; return options; } diff --git a/ui/src/container/models/Details/regression/current/data-quality/data-point-distribution/index.jsx b/ui/src/container/models/Details/regression/current/data-quality/data-point-distribution/index.jsx index b1cf0df4..14a58c9a 100644 --- a/ui/src/container/models/Details/regression/current/data-quality/data-point-distribution/index.jsx +++ b/ui/src/container/models/Details/regression/current/data-quality/data-point-distribution/index.jsx @@ -107,11 +107,11 @@ function DataPointDistributionChart() { echarts={echarts} onChartReady={handleOnChartReady} option={chartOptions(dataset, CHART_COLOR.REFERENCE, CHART_COLOR.CURRENT)} - style={{ height: '100%' }} + style={{ height: '12rem', width: '100%' }} /> )} - modifier="w-full h-full shadow" + modifier="w-full h-full shadow overflow-auto max-w-full " size="small" /> ); diff --git a/ui/src/container/models/Details/regression/current/data-quality/data-point-distribution/options.js b/ui/src/container/models/Details/regression/current/data-quality/data-point-distribution/options.js index f2706144..938ff6a5 100644 --- a/ui/src/container/models/Details/regression/current/data-quality/data-point-distribution/options.js +++ b/ui/src/container/models/Details/regression/current/data-quality/data-point-distribution/options.js @@ -13,6 +13,7 @@ export default function chartOptions(dataset, referenceColor, currentColor) { ...commonChartOptions.gridOptions(CHART_TYPE.BAR), ...commonChartOptions.xAxisOptions(OPTIONS_TYPE.CATEGORY, xAxisData), ...commonChartOptions.yAxisOptions(OPTIONS_TYPE.VALUE), + ...commonChartOptions.commonOptions(CHART_TYPE.BAR), series: [ commonChartOptions.seriesOptions(CHART_TYPE.BAR, 'reference', referenceColor, dataset.referenceValues), commonChartOptions.seriesOptions(CHART_TYPE.BAR, 'current', currentColor, dataset.currentValues), @@ -20,6 +21,7 @@ export default function chartOptions(dataset, referenceColor, currentColor) { }; options.xAxis.axisLabel.rotate = 20; + options.barCategoryGap = '0'; return options; } diff --git a/ui/src/container/models/Details/regression/current/data-quality/data-quality-list/numerical/chart/options.js b/ui/src/container/models/Details/regression/current/data-quality/data-quality-list/numerical/chart/options.js index 645d17b7..2275c3e6 100644 --- a/ui/src/container/models/Details/regression/current/data-quality/data-quality-list/numerical/chart/options.js +++ b/ui/src/container/models/Details/regression/current/data-quality/data-quality-list/numerical/chart/options.js @@ -13,6 +13,7 @@ export default function chartOptions(dataset, referenceColor, currentColor) { ...commonChartOptions.gridOptions(CHART_TYPE.BAR), ...commonChartOptions.xAxisOptions(OPTIONS_TYPE.CATEGORY, xAxisData), ...commonChartOptions.yAxisOptions(OPTIONS_TYPE.VALUE), + ...commonChartOptions.commonOptions(CHART_TYPE.BAR), series: [ commonChartOptions.seriesOptions(CHART_TYPE.BAR, 'reference', referenceColor, dataset.referenceValues), commonChartOptions.seriesOptions(CHART_TYPE.BAR, 'current', currentColor, dataset.currentValues), @@ -20,6 +21,7 @@ export default function chartOptions(dataset, referenceColor, currentColor) { }; options.xAxis.axisLabel.rotate = 20; + options.barCategoryGap = '0'; return options; } diff --git a/ui/src/container/models/Details/regression/reference/data-quality/data-point-distribution/index.jsx b/ui/src/container/models/Details/regression/reference/data-quality/data-point-distribution/index.jsx index 2f0ee804..27bc8bf4 100644 --- a/ui/src/container/models/Details/regression/reference/data-quality/data-point-distribution/index.jsx +++ b/ui/src/container/models/Details/regression/reference/data-quality/data-point-distribution/index.jsx @@ -109,7 +109,7 @@ function DataPointDistributionChart() { echarts={echarts} onChartReady={handleOnChartReady} option={chartOptions(classMetrics, CHART_COLOR.REFERENCE)} - style={{ height: '20rem', width: '100%' }} + style={{ height: '12rem', width: '100%' }} /> )} diff --git a/ui/src/container/models/Details/regression/reference/data-quality/data-point-distribution/options.js b/ui/src/container/models/Details/regression/reference/data-quality/data-point-distribution/options.js index 90f22928..142354ae 100644 --- a/ui/src/container/models/Details/regression/reference/data-quality/data-point-distribution/options.js +++ b/ui/src/container/models/Details/regression/reference/data-quality/data-point-distribution/options.js @@ -13,12 +13,14 @@ export default function chartOptions(dataset, color) { ...commonChartOptions.gridOptions(CHART_TYPE.BAR), ...commonChartOptions.xAxisOptions(OPTIONS_TYPE.CATEGORY, xAxisData), ...commonChartOptions.yAxisOptions(OPTIONS_TYPE.VALUE), + ...commonChartOptions.commonOptions(CHART_TYPE.BAR), series: [ commonChartOptions.seriesOptions(CHART_TYPE.BAR, 'reference', color, dataset.referenceValues), ], }; options.xAxis.axisLabel.rotate = 20; + options.barCategoryGap = '0'; return options; } diff --git a/ui/src/container/models/Details/regression/reference/data-quality/data-quality-list/numerical/chart/options.js b/ui/src/container/models/Details/regression/reference/data-quality/data-quality-list/numerical/chart/options.js index b3b18a88..ab577e51 100644 --- a/ui/src/container/models/Details/regression/reference/data-quality/data-quality-list/numerical/chart/options.js +++ b/ui/src/container/models/Details/regression/reference/data-quality/data-quality-list/numerical/chart/options.js @@ -13,12 +13,14 @@ export default function chartOptions(dataset, color) { ...commonChartOptions.gridOptions(CHART_TYPE.BAR), ...commonChartOptions.xAxisOptions(OPTIONS_TYPE.CATEGORY, xAxisData), ...commonChartOptions.yAxisOptions(OPTIONS_TYPE.VALUE), + ...commonChartOptions.commonOptions(CHART_TYPE.BAR), series: [ commonChartOptions.seriesOptions(CHART_TYPE.BAR, 'reference', color, dataset.referenceValues), ], }; options.xAxis.axisLabel.rotate = 20; + options.barCategoryGap = '0'; return options; } diff --git a/ui/src/helpers/common-chart-options.js b/ui/src/helpers/common-chart-options.js index c5f61063..c413843c 100644 --- a/ui/src/helpers/common-chart-options.js +++ b/ui/src/helpers/common-chart-options.js @@ -146,10 +146,6 @@ const heatmapVisualMapOptions = (dataMax, colors, itemHeight) => { return options; }; -const colorList = { - color: ['#00BFFF', '#1E90FF', '#00CED1', '#20B2AA', '#4169E1', '#6A5ACD', '#8A2BE2', '#9400D3', '#BA55D3'], -}; - const tooltipOptions = () => ({ tooltip: { trigger: 'axis', @@ -163,6 +159,42 @@ const tooltipOptions = () => ({ }, }); +const dataZoomOptions = () => ([ + { + show: true, + }, + { + type: 'inside', + }, +]); + +const legendOptions = (data) => { + const options = { + legend: { + right: 0, + top: 16, + bottom: 0, + orient: 'vertical', + type: 'scroll', + scrollDataIndex: 'scroll', + pageIconSize: 8, + pageTextStyle: { + fontSize: 8, + }, + textStyle: { + fontSize: 10, + fontWeight: '300', + }, + }, + }; + + if (data) { + options.legend.data = data; + } + + return options; +}; + const barSeriesOptions = (title, color, data) => { const options = { title, @@ -215,8 +247,6 @@ const barChartCommonOptions = () => ({ emphasis: { disabled: true }, barCategoryGap: '21%', barGap: '0', - overflow: 'truncate', - lineOverflow: 'truncate', itemStyle: { borderWidth: 1, borderColor: 'rgba(201, 25, 25, 1)', @@ -321,6 +351,20 @@ const CHART_TYPE = { LINE: 'line', }; +const colorList = { + color: [ + '#00BFFF', + '#1E90FF', + '#00CED1', + '#20B2AA', + '#4169E1', + '#6A5ACD', + '#8A2BE2', + '#9400D3', + '#BA55D3', + ], +}; + export { yAxisOptions, xAxisOptions, @@ -329,6 +373,8 @@ export { commonOptions, visualMapOptions, tooltipOptions, + dataZoomOptions, + legendOptions, colorList, OPTIONS_TYPE, CHART_COLOR, diff --git a/ui/yarn.lock b/ui/yarn.lock index 50cad6c8..ca0ed854 100644 --- a/ui/yarn.lock +++ b/ui/yarn.lock @@ -604,10 +604,10 @@ dependencies: yup "^1.4.0" -"@radicalbit/radicalbit-design-system@1.0.0": - version "1.0.0" - resolved "https://registry.yarnpkg.com/@radicalbit/radicalbit-design-system/-/radicalbit-design-system-1.0.0.tgz#e89b4c574df9beb547c88b447783e05bfe987933" - integrity sha512-CGTAVJjBL8eVH+X3wOUmLlgMaxgPHIqV/UjmT9IvILEPQb/MQYXQMXpTcnMk6wcjawvSH0wUsctY/8wmBb2T+g== +"@radicalbit/radicalbit-design-system@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radicalbit/radicalbit-design-system/-/radicalbit-design-system-1.1.0.tgz#2506608ee3b4bfe7cbf6c81da6ea4fba0e0ee76a" + integrity sha512-GBX5ch7gXpFU20ZM4YpLjCwhV/e0boRxl5cgXiWuBh+NR6rh7HC2rOfsPPRu/1tuaTUU8vwBD8KImQc9SvVBJQ== dependencies: "@babel/polyfill" "7.12.1" "@fortawesome/fontawesome-svg-core" "^6.5.1" @@ -5140,7 +5140,16 @@ string-convert@^0.2.0: resolved "https://registry.yarnpkg.com/string-convert/-/string-convert-0.2.1.tgz#6982cc3049fbb4cd85f8b24568b9d9bf39eeff97" integrity sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A== -"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0: +"string-width-cjs@npm:string-width@^4.2.0": + version "4.2.3" + resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" + integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== + dependencies: + emoji-regex "^8.0.0" + is-fullwidth-code-point "^3.0.0" + strip-ansi "^6.0.1" + +string-width@^4.1.0: version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -5220,7 +5229,14 @@ stringify-entities@^4.0.0: character-entities-html4 "^2.0.0" character-entities-legacy "^3.0.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: +"strip-ansi-cjs@npm:strip-ansi@^6.0.1": + version "6.0.1" + resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" + integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== + dependencies: + ansi-regex "^5.0.1" + +strip-ansi@^6.0.0, strip-ansi@^6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==