From 0986bc21c125e76e432e5244ec469e988e86afbc Mon Sep 17 00:00:00 2001 From: AlasDiablo <25723276+AlasDiablo@users.noreply.github.com> Date: Thu, 23 Nov 2023 14:31:38 +0100 Subject: [PATCH 01/11] feat: add preview and increases ux --- src/app/js/formats/vega-lite/VegaLiteAdmin.js | 2 +- src/app/js/formats/vega-lite/VegaLiteView.js | 2 +- .../component/bar-chart/BarChartAdmin.js | 247 +++++++++--------- .../component/bar-chart/BarChartView.js | 54 ++-- .../component/bubble-plot/BubblePlotAdmin.js | 113 ++++---- .../component/bubble-plot/BubblePlotView.js | 46 +++- .../component/cartography/CartographyAdmin.js | 127 ++++----- .../component/cartography/CartographyView.js | 20 +- .../component/heatmap/HeatMapAdmin.js | 112 ++++---- .../component/heatmap/HeatMapView.js | 46 +++- .../component/pie-chart/PieChartAdmin.js | 109 ++++---- .../component/pie-chart/PieChartView.js | 36 ++- src/app/js/formats/vega-utils/adminStyles.js | 14 + .../formats/{ => vega-utils}/chartsHooks.js | 0 .../components}/VegaAdvancedMode.js | 5 +- .../vega-utils/components/VegaFieldPreview.js | 24 ++ .../vega-utils/components/VegaFieldSet.js | 28 ++ .../components/VegaToolTips.js} | 6 +- .../vega/component/flow-map/FlowMapAdmin.js | 6 +- .../vega/component/flow-map/FlowMapView.js | 2 +- .../component/radar-chart/RadarChartAdmin.js | 6 +- .../component/radar-chart/RadarChartView.js | 2 +- 22 files changed, 603 insertions(+), 404 deletions(-) create mode 100644 src/app/js/formats/vega-utils/adminStyles.js rename src/app/js/formats/{ => vega-utils}/chartsHooks.js (100%) rename src/app/js/formats/{shared => vega-utils/components}/VegaAdvancedMode.js (96%) create mode 100644 src/app/js/formats/vega-utils/components/VegaFieldPreview.js create mode 100644 src/app/js/formats/vega-utils/components/VegaFieldSet.js rename src/app/js/formats/{shared/ToolTips.js => vega-utils/components/VegaToolTips.js} (97%) diff --git a/src/app/js/formats/vega-lite/VegaLiteAdmin.js b/src/app/js/formats/vega-lite/VegaLiteAdmin.js index e7e317a0a..7554f6172 100644 --- a/src/app/js/formats/vega-lite/VegaLiteAdmin.js +++ b/src/app/js/formats/vega-lite/VegaLiteAdmin.js @@ -6,7 +6,7 @@ import { Box, TextField } from '@mui/material'; import { polyglot as polyglotPropTypes } from '../../propTypes'; import updateAdminArgs from '../shared/updateAdminArgs'; import RoutineParamsAdmin from '../shared/RoutineParamsAdmin'; -import VegaAdvancedMode from '../shared/VegaAdvancedMode'; +import VegaAdvancedMode from '../vega-utils/components/VegaAdvancedMode'; export const defaultArgs = { params: { diff --git a/src/app/js/formats/vega-lite/VegaLiteView.js b/src/app/js/formats/vega-lite/VegaLiteView.js index de8ff1047..a3d24ca32 100644 --- a/src/app/js/formats/vega-lite/VegaLiteView.js +++ b/src/app/js/formats/vega-lite/VegaLiteView.js @@ -11,7 +11,7 @@ import { VEGA_ACTIONS_WIDTH, VEGA_LITE_DATA_INJECT_TYPE_A, } from '../chartsUtils'; -import { useSizeObserver } from '../chartsHooks'; +import { useSizeObserver } from '../vega-utils/chartsHooks'; const styles = { container: { diff --git a/src/app/js/formats/vega-lite/component/bar-chart/BarChartAdmin.js b/src/app/js/formats/vega-lite/component/bar-chart/BarChartAdmin.js index 3f24772b2..34bdc7938 100644 --- a/src/app/js/formats/vega-lite/component/bar-chart/BarChartAdmin.js +++ b/src/app/js/formats/vega-lite/component/bar-chart/BarChartAdmin.js @@ -16,7 +16,7 @@ import updateAdminArgs from '../../../shared/updateAdminArgs'; import RoutineParamsAdmin from '../../../shared/RoutineParamsAdmin'; import ColorPickerParamsAdmin from '../../../shared/ColorPickerParamsAdmin'; import { MULTICHROMATIC_DEFAULT_COLORSET } from '../../../colorUtils'; -import ToolTips from '../../../shared/ToolTips'; +import VegaToolTips from '../../../vega-utils/components/VegaToolTips'; import BarChart from '../../models/BarChart'; import { AXIS_X, @@ -24,7 +24,10 @@ import { lodexDirectionToIdDirection, lodexScaleToIdScale, } from '../../../chartsUtils'; -import VegaAdvancedMode from '../../../shared/VegaAdvancedMode'; +import VegaAdvancedMode from '../../../vega-utils/components/VegaAdvancedMode'; +import { BarChartAdminView } from './BarChartView'; +import VegaFieldSet from '../../../vega-utils/components/VegaFieldSet'; +import VegaFieldPreview from '../../../vega-utils/components/VegaFieldPreview'; export const defaultArgs = { params: { @@ -161,11 +164,11 @@ const BarChartAdmin = props => { }; const toggleTooltip = () => { - updateAdminArgs('tooltip', args.tooltip, props); + updateAdminArgs('tooltip', !args.tooltip, props); }; const toggleLabels = () => { - updateAdminArgs('labels', args.labels, props); + updateAdminArgs('labels', !args.labels, props); }; const toggleLabelOverlap = () => { @@ -187,127 +190,135 @@ const BarChartAdmin = props => { justifyContent="space-between" gap={2} > - - - } - label={polyglot.t('advancedMode')} - /> - - - {advancedMode ? ( - + - ) : ( - <> - - - - - {polyglot.t('horizontal')} - - - {polyglot.t('vertical')} - - - - } - label={polyglot.t('diagonal_category_axis')} - /> - - } - label={polyglot.t('diagonal_value_axis')} - /> - - } - label={polyglot.t('axis_round_value')} - /> + + + } - label={polyglot.t('toggle_labels')} + label={polyglot.t('advancedMode')} /> - - } - label={polyglot.t('toggle_label_overlap')} + + {advancedMode ? ( + - - - {polyglot.t('linear')} - - {polyglot.t('log')} - - - - )} + ) : ( + <> + + + + + {polyglot.t('horizontal')} + + + {polyglot.t('vertical')} + + + + } + label={polyglot.t('diagonal_category_axis')} + /> + + } + label={polyglot.t('diagonal_value_axis')} + /> + + } + label={polyglot.t('axis_round_value')} + /> + + } + label={polyglot.t('toggle_labels')} + /> + + } + label={polyglot.t('toggle_label_overlap')} + /> + + + {polyglot.t('linear')} + + {polyglot.t('log')} + + + + )} + + ); }; diff --git a/src/app/js/formats/vega-lite/component/bar-chart/BarChartView.js b/src/app/js/formats/vega-lite/component/bar-chart/BarChartView.js index 7bfd2c8ed..b48d25660 100644 --- a/src/app/js/formats/vega-lite/component/bar-chart/BarChartView.js +++ b/src/app/js/formats/vega-lite/component/bar-chart/BarChartView.js @@ -16,7 +16,7 @@ import { import BarChart from '../../models/BarChart'; import { CustomActionVegaLite } from '../vega-lite-component'; import InvalidFormat from '../../../InvalidFormat'; -import { useSizeObserver } from '../../../chartsHooks'; +import { useSizeObserver } from '../../../vega-utils/chartsHooks'; const styles = { container: { @@ -115,23 +115,25 @@ const BarChartView = ({ }; BarChartView.propTypes = { - field: fieldPropTypes.isRequired, - resource: PropTypes.object.isRequired, - data: PropTypes.any, - colors: PropTypes.string.isRequired, - direction: PropTypes.string.isRequired, - orderBy: PropTypes.string.isRequired, - diagonalCategoryAxis: PropTypes.bool.isRequired, - diagonalValueAxis: PropTypes.bool.isRequired, - scale: PropTypes.string.isRequired, - params: PropTypes.any.isRequired, - axisRoundValue: PropTypes.bool.isRequired, - tooltip: PropTypes.bool.isRequired, - tooltipCategory: PropTypes.string.isRequired, - tooltipValue: PropTypes.string.isRequired, - labels: PropTypes.string.isRequired, - labelOverlap: PropTypes.string.isRequired, - barSize: PropTypes.number.isRequired, + field: fieldPropTypes, + resource: PropTypes.object, + data: PropTypes.shape({ + values: PropTypes.any.isRequired, + }), + colors: PropTypes.string, + direction: PropTypes.string, + orderBy: PropTypes.string, + diagonalCategoryAxis: PropTypes.bool, + diagonalValueAxis: PropTypes.bool, + scale: PropTypes.string, + params: PropTypes.any, + axisRoundValue: PropTypes.bool, + tooltip: PropTypes.bool, + tooltipCategory: PropTypes.string, + tooltipValue: PropTypes.string, + labels: PropTypes.string, + labelOverlap: PropTypes.string, + barSize: PropTypes.number, advancedMode: PropTypes.bool, advancedModeSpec: PropTypes.string, }; @@ -155,4 +157,20 @@ const mapStateToProps = (state, { formatData }) => { }; }; +export const BarChartAdminView = connect((state, props) => { + return { + ...props, + field: { + format: 'Preview Format', + }, + data: { + values: [ + { _id: 'A', value: 28 }, + { _id: 'B', value: 55 }, + { _id: 'C', value: 43 }, + ], + }, + }; +})(BarChartView); + export default compose(injectData(), connect(mapStateToProps))(BarChartView); diff --git a/src/app/js/formats/vega-lite/component/bubble-plot/BubblePlotAdmin.js b/src/app/js/formats/vega-lite/component/bubble-plot/BubblePlotAdmin.js index e0b297aea..0dcf5bf3f 100644 --- a/src/app/js/formats/vega-lite/component/bubble-plot/BubblePlotAdmin.js +++ b/src/app/js/formats/vega-lite/component/bubble-plot/BubblePlotAdmin.js @@ -12,12 +12,15 @@ import { import { polyglot as polyglotPropTypes } from '../../../../propTypes'; import updateAdminArgs from '../../../shared/updateAdminArgs'; import RoutineParamsAdmin from '../../../shared/RoutineParamsAdmin'; -import ToolTips from '../../../shared/ToolTips'; +import VegaToolTips from '../../../vega-utils/components/VegaToolTips'; import ColorPickerParamsAdmin from '../../../shared/ColorPickerParamsAdmin'; import { MULTICHROMATIC_DEFAULT_COLORSET } from '../../../colorUtils'; import BubblePlot from '../../models/BubblePlot'; import { lodexOrderToIdOrder } from '../../../chartsUtils'; -import VegaAdvancedMode from '../../../shared/VegaAdvancedMode'; +import VegaAdvancedMode from '../../../vega-utils/components/VegaAdvancedMode'; +import VegaFieldSet from '../../../vega-utils/components/VegaFieldSet'; +import { BubblePlotAdminView } from './BubblePlotView'; +import VegaFieldPreview from '../../../vega-utils/components/VegaFieldPreview'; export const defaultArgs = { params: { @@ -136,62 +139,70 @@ const BubblePlotAdmin = props => { justifyContent="space-between" gap={2} > - - - } - label={polyglot.t('advancedMode')} - /> - - - {advancedMode ? ( - + - ) : ( - <> + + + } - label={polyglot.t('flip_axis')} - /> - - + {advancedMode ? ( + - - )} + ) : ( + <> + + } + label={polyglot.t('flip_axis')} + /> + + + + )} + + ); }; diff --git a/src/app/js/formats/vega-lite/component/bubble-plot/BubblePlotView.js b/src/app/js/formats/vega-lite/component/bubble-plot/BubblePlotView.js index 97bbed509..d098d82b4 100644 --- a/src/app/js/formats/vega-lite/component/bubble-plot/BubblePlotView.js +++ b/src/app/js/formats/vega-lite/component/bubble-plot/BubblePlotView.js @@ -13,7 +13,7 @@ import { } from '../../../chartsUtils'; import BubblePlot from '../../models/BubblePlot'; import InvalidFormat from '../../../InvalidFormat'; -import { useSizeObserver } from '../../../chartsHooks'; +import { useSizeObserver } from '../../../vega-utils/chartsHooks'; const styles = { container: { @@ -92,16 +92,18 @@ const BubblePlotView = ({ }; BubblePlotView.propTypes = { - field: fieldPropTypes.isRequired, - resource: PropTypes.object.isRequired, - data: PropTypes.any, - params: PropTypes.any.isRequired, - colors: PropTypes.string.isRequired, - flipAxis: PropTypes.bool.isRequired, - tooltip: PropTypes.bool.isRequired, - tooltipSource: PropTypes.string.isRequired, - tooltipTarget: PropTypes.string.isRequired, - tooltipWeight: PropTypes.string.isRequired, + field: fieldPropTypes, + resource: PropTypes.object, + data: PropTypes.shape({ + values: PropTypes.any.isRequired, + }), + params: PropTypes.any, + colors: PropTypes.string, + flipAxis: PropTypes.bool, + tooltip: PropTypes.bool, + tooltipSource: PropTypes.string, + tooltipTarget: PropTypes.string, + tooltipWeight: PropTypes.string, advancedMode: PropTypes.bool, advancedModeSpec: PropTypes.string, }; @@ -121,4 +123,26 @@ const mapStateToProps = (state, { formatData }) => { }; }; +export const BubblePlotAdminView = connect((state, props) => { + return { + ...props, + field: { + format: 'Preview Format', + }, + data: { + values: [ + { source: 'A', target: 'A', weight: 28 }, + { source: 'A', target: 'B', weight: 55 }, + { source: 'A', target: 'C', weight: 43 }, + { source: 'B', target: 'A', weight: 15 }, + { source: 'B', target: 'B', weight: 68 }, + { source: 'B', target: 'C', weight: 45 }, + { source: 'C', target: 'A', weight: 85 }, + { source: 'C', target: 'B', weight: 32 }, + { source: 'C', target: 'C', weight: 17 }, + ], + }, + }; +})(BubblePlotView); + export default compose(injectData(), connect(mapStateToProps))(BubblePlotView); diff --git a/src/app/js/formats/vega-lite/component/cartography/CartographyAdmin.js b/src/app/js/formats/vega-lite/component/cartography/CartographyAdmin.js index 5086a3996..1fc5cb974 100644 --- a/src/app/js/formats/vega-lite/component/cartography/CartographyAdmin.js +++ b/src/app/js/formats/vega-lite/component/cartography/CartographyAdmin.js @@ -15,10 +15,11 @@ import { GradientSchemeSelector } from '../../../../lib/components/ColorSchemeSe import { polyglot as polyglotPropTypes } from '../../../../propTypes'; import updateAdminArgs from '../../../shared/updateAdminArgs'; import RoutineParamsAdmin from '../../../shared/RoutineParamsAdmin'; -import ToolTips from '../../../shared/ToolTips'; +import VegaToolTips from '../../../vega-utils/components/VegaToolTips'; import { MAP_EUROPE, MAP_FRANCE, MAP_WORLD } from '../../../chartsUtils'; import Cartography from '../../models/Cartography'; -import VegaAdvancedMode from '../../../shared/VegaAdvancedMode'; +import VegaAdvancedMode from '../../../vega-utils/components/VegaAdvancedMode'; +import VegaFieldSet from '../../../vega-utils/components/VegaFieldSet'; export const defaultArgs = { params: { @@ -130,68 +131,72 @@ const CartographyAdmin = props => { justifyContent="space-between" gap={2} > - - - } - label={polyglot.t('advancedMode')} - /> - - - {advancedMode ? ( - + - ) : ( - <> - - - {polyglot.t('world_position_world')} - - - {polyglot.t('world_position_europe')} - - - {polyglot.t('world_position_france')} - - - + + + + } + label={polyglot.t('advancedMode')} /> - + {advancedMode ? ( + - - )} + ) : ( + <> + + + {polyglot.t('world_position_world')} + + + {polyglot.t('world_position_europe')} + + + {polyglot.t('world_position_france')} + + + + + + )} + ); }; diff --git a/src/app/js/formats/vega-lite/component/cartography/CartographyView.js b/src/app/js/formats/vega-lite/component/cartography/CartographyView.js index c06eddef8..2f6897538 100644 --- a/src/app/js/formats/vega-lite/component/cartography/CartographyView.js +++ b/src/app/js/formats/vega-lite/component/cartography/CartographyView.js @@ -15,7 +15,7 @@ import injectData from '../../../injectData'; import Cartography from '../../models/Cartography'; import { schemeOrRd } from 'd3-scale-chromatic'; import InvalidFormat from '../../../InvalidFormat'; -import { useSizeObserver } from '../../../chartsHooks'; +import { useSizeObserver } from '../../../vega-utils/chartsHooks'; const styles = { container: { @@ -94,14 +94,16 @@ const CartographyView = ({ }; CartographyView.propTypes = { - field: fieldPropTypes.isRequired, - resource: PropTypes.object.isRequired, - data: PropTypes.any, - tooltip: PropTypes.bool.isRequired, - tooltipCategory: PropTypes.string.isRequired, - tooltipValue: PropTypes.string.isRequired, - colorScheme: PropTypes.arrayOf(PropTypes.string).isRequired, - worldPosition: PropTypes.string.isRequired, + field: fieldPropTypes, + resource: PropTypes.object, + data: PropTypes.shape({ + values: PropTypes.any.isRequired, + }), + tooltip: PropTypes.bool, + tooltipCategory: PropTypes.string, + tooltipValue: PropTypes.string, + colorScheme: PropTypes.arrayOf(PropTypes.string), + worldPosition: PropTypes.string, advancedMode: PropTypes.bool, advancedModeSpec: PropTypes.string, }; diff --git a/src/app/js/formats/vega-lite/component/heatmap/HeatMapAdmin.js b/src/app/js/formats/vega-lite/component/heatmap/HeatMapAdmin.js index b975fd6d6..c3113608d 100644 --- a/src/app/js/formats/vega-lite/component/heatmap/HeatMapAdmin.js +++ b/src/app/js/formats/vega-lite/component/heatmap/HeatMapAdmin.js @@ -14,10 +14,13 @@ import { polyglot as polyglotPropTypes } from '../../../../propTypes'; import updateAdminArgs from '../../../shared/updateAdminArgs'; import RoutineParamsAdmin from '../../../shared/RoutineParamsAdmin'; import { GradientSchemeSelector } from '../../../../lib/components/ColorSchemeSelector'; -import ToolTips from '../../../shared/ToolTips'; +import VegaToolTips from '../../../vega-utils/components/VegaToolTips'; import HeatMap from '../../models/HeatMap'; import { lodexOrderToIdOrder } from '../../../chartsUtils'; -import VegaAdvancedMode from '../../../shared/VegaAdvancedMode'; +import VegaAdvancedMode from '../../../vega-utils/components/VegaAdvancedMode'; +import { HeatMapAdminView } from './HeatMapView'; +import VegaFieldSet from '../../../vega-utils/components/VegaFieldSet'; +import VegaFieldPreview from '../../../vega-utils/components/VegaFieldPreview'; export const defaultArgs = { params: { @@ -138,62 +141,67 @@ const HeatMapAdmin = props => { justifyContent="space-between" gap={2} > - - - } - label={polyglot.t('advancedMode')} - /> - - - {advancedMode ? ( - + - ) : ( - <> - - + + + } - label={polyglot.t('flip_axis')} + label={polyglot.t('advancedMode')} /> - - )} + + {advancedMode ? ( + + ) : ( + <> + + + + } + label={polyglot.t('flip_axis')} + /> + + )} + + ); }; diff --git a/src/app/js/formats/vega-lite/component/heatmap/HeatMapView.js b/src/app/js/formats/vega-lite/component/heatmap/HeatMapView.js index ccdd89c1c..005fb5c55 100644 --- a/src/app/js/formats/vega-lite/component/heatmap/HeatMapView.js +++ b/src/app/js/formats/vega-lite/component/heatmap/HeatMapView.js @@ -13,7 +13,7 @@ import { VEGA_LITE_DATA_INJECT_TYPE_A, } from '../../../chartsUtils'; import InvalidFormat from '../../../InvalidFormat'; -import { useSizeObserver } from '../../../chartsHooks'; +import { useSizeObserver } from '../../../vega-utils/chartsHooks'; const styles = { container: { @@ -92,16 +92,18 @@ const HeatMapView = ({ }; HeatMapView.propTypes = { - field: fieldPropTypes.isRequired, - resource: PropTypes.object.isRequired, - data: PropTypes.any, - params: PropTypes.any.isRequired, - colorScheme: PropTypes.arrayOf(PropTypes.string).isRequired, - flipAxis: PropTypes.bool.isRequired, - tooltip: PropTypes.bool.isRequired, - tooltipSource: PropTypes.string.isRequired, - tooltipTarget: PropTypes.string.isRequired, - tooltipWeight: PropTypes.string.isRequired, + field: fieldPropTypes, + resource: PropTypes.object, + data: PropTypes.shape({ + values: PropTypes.any.isRequired, + }), + params: PropTypes.any, + colorScheme: PropTypes.arrayOf(PropTypes.string), + flipAxis: PropTypes.bool, + tooltip: PropTypes.bool, + tooltipSource: PropTypes.string, + tooltipTarget: PropTypes.string, + tooltipWeight: PropTypes.string, advancedMode: PropTypes.bool, advancedModeSpec: PropTypes.string, }; @@ -121,4 +123,26 @@ const mapStateToProps = (state, { formatData }) => { }; }; +export const HeatMapAdminView = connect((state, props) => { + return { + ...props, + field: { + format: 'Preview Format', + }, + data: { + values: [ + { source: 'A', target: 'A', weight: 28 }, + { source: 'A', target: 'B', weight: 55 }, + { source: 'A', target: 'C', weight: 43 }, + { source: 'B', target: 'A', weight: 15 }, + { source: 'B', target: 'B', weight: 68 }, + { source: 'B', target: 'C', weight: 45 }, + { source: 'C', target: 'A', weight: 85 }, + { source: 'C', target: 'B', weight: 32 }, + { source: 'C', target: 'C', weight: 17 }, + ], + }, + }; +})(HeatMapView); + export default compose(injectData(), connect(mapStateToProps))(HeatMapView); diff --git a/src/app/js/formats/vega-lite/component/pie-chart/PieChartAdmin.js b/src/app/js/formats/vega-lite/component/pie-chart/PieChartAdmin.js index f71be59c9..51479a707 100644 --- a/src/app/js/formats/vega-lite/component/pie-chart/PieChartAdmin.js +++ b/src/app/js/formats/vega-lite/component/pie-chart/PieChartAdmin.js @@ -14,9 +14,12 @@ import updateAdminArgs from '../../../shared/updateAdminArgs'; import RoutineParamsAdmin from '../../../shared/RoutineParamsAdmin'; import ColorPickerParamsAdmin from '../../../shared/ColorPickerParamsAdmin'; import { MULTICHROMATIC_DEFAULT_COLORSET } from '../../../colorUtils'; -import ToolTips from '../../../shared/ToolTips'; +import VegaToolTips from '../../../vega-utils/components/VegaToolTips'; import PieChart from '../../models/PieChart'; -import VegaAdvancedMode from '../../../shared/VegaAdvancedMode'; +import VegaAdvancedMode from '../../../vega-utils/components/VegaAdvancedMode'; +import VegaFieldSet from '../../../vega-utils/components/VegaFieldSet'; +import VegaFieldPreview from '../../../vega-utils/components/VegaFieldPreview'; +import { PieChartAdminView } from './PieChartView'; export const defaultArgs = { params: { @@ -126,60 +129,68 @@ const PieChartAdmin = props => { justifyContent="space-between" gap={2} > - - - } - label={polyglot.t('advancedMode')} - /> - - - {advancedMode ? ( - + - ) : ( - <> + + + } - label={polyglot.t('toggle_labels')} - /> - - + {advancedMode ? ( + - - )} + ) : ( + <> + + + } + label={polyglot.t('toggle_labels')} + /> + + + )} + + ); }; diff --git a/src/app/js/formats/vega-lite/component/pie-chart/PieChartView.js b/src/app/js/formats/vega-lite/component/pie-chart/PieChartView.js index e8d535a0e..614a71e32 100644 --- a/src/app/js/formats/vega-lite/component/pie-chart/PieChartView.js +++ b/src/app/js/formats/vega-lite/component/pie-chart/PieChartView.js @@ -12,7 +12,7 @@ import { VEGA_LITE_DATA_INJECT_TYPE_A, } from '../../../chartsUtils'; import InvalidFormat from '../../../InvalidFormat'; -import { useSizeObserver } from '../../../chartsHooks'; +import { useSizeObserver } from '../../../vega-utils/chartsHooks'; const styles = { container: { @@ -91,14 +91,16 @@ const PieChartView = ({ }; PieChartView.propTypes = { - field: fieldPropTypes.isRequired, - resource: PropTypes.object.isRequired, - data: PropTypes.any, - colors: PropTypes.string.isRequired, - tooltip: PropTypes.bool.isRequired, - tooltipCategory: PropTypes.string.isRequired, - tooltipValue: PropTypes.string.isRequired, - labels: PropTypes.bool.isRequired, + field: fieldPropTypes, + resource: PropTypes.object, + data: PropTypes.shape({ + values: PropTypes.any.isRequired, + }), + colors: PropTypes.string, + tooltip: PropTypes.bool, + tooltipCategory: PropTypes.string, + tooltipValue: PropTypes.string, + labels: PropTypes.bool, advancedMode: PropTypes.bool, advancedModeSpec: PropTypes.string, }; @@ -122,4 +124,20 @@ const mapStateToProps = (state, { formatData }) => { }; }; +export const PieChartAdminView = connect((state, props) => { + return { + ...props, + field: { + format: 'Preview Format', + }, + data: { + values: [ + { _id: 'A', value: 28 }, + { _id: 'B', value: 55 }, + { _id: 'C', value: 43 }, + ], + }, + }; +})(PieChartView); + export default compose(injectData(), connect(mapStateToProps))(PieChartView); diff --git a/src/app/js/formats/vega-utils/adminStyles.js b/src/app/js/formats/vega-utils/adminStyles.js new file mode 100644 index 000000000..da3cd2b62 --- /dev/null +++ b/src/app/js/formats/vega-utils/adminStyles.js @@ -0,0 +1,14 @@ +export const vegaAdminStyle = { + fieldset: { + width: '100%', + borderRadius: '5px', + padding: '10px', + }, + legend: { + paddingLeft: '4px', + paddingRight: '4px', + }, + box: { + padding: '10px', + }, +}; diff --git a/src/app/js/formats/chartsHooks.js b/src/app/js/formats/vega-utils/chartsHooks.js similarity index 100% rename from src/app/js/formats/chartsHooks.js rename to src/app/js/formats/vega-utils/chartsHooks.js diff --git a/src/app/js/formats/shared/VegaAdvancedMode.js b/src/app/js/formats/vega-utils/components/VegaAdvancedMode.js similarity index 96% rename from src/app/js/formats/shared/VegaAdvancedMode.js rename to src/app/js/formats/vega-utils/components/VegaAdvancedMode.js index 9aa3028f1..780807e67 100644 --- a/src/app/js/formats/shared/VegaAdvancedMode.js +++ b/src/app/js/formats/vega-utils/components/VegaAdvancedMode.js @@ -6,7 +6,7 @@ import ReportProblemIcon from '@mui/icons-material/ReportProblem'; import CachedIcon from '@mui/icons-material/Cached'; import isEqual from 'lodash.isequal'; -import { polyglot as polyglotPropTypes } from '../../propTypes'; +import { polyglot as polyglotPropTypes } from '../../../propTypes'; const styles = { error: { @@ -34,7 +34,7 @@ const styles = { }; const VegaAdvancedMode = ({ p, value, onChange, onClear }) => { - const FormSourceCodeField = require('../../lib/components/FormSourceCodeField') + const FormSourceCodeField = require('../../../lib/components/FormSourceCodeField') .default; const [currentValue, setCurrentValue] = useState(value || '{}'); @@ -149,6 +149,7 @@ const VegaAdvancedMode = ({ p, value, onChange, onClear }) => { style={{ width: '100%', height: '70vh', + borderRadius: '5px', }} mode="json" input={{ diff --git a/src/app/js/formats/vega-utils/components/VegaFieldPreview.js b/src/app/js/formats/vega-utils/components/VegaFieldPreview.js new file mode 100644 index 000000000..079e1cd73 --- /dev/null +++ b/src/app/js/formats/vega-utils/components/VegaFieldPreview.js @@ -0,0 +1,24 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import translate from 'redux-polyglot/translate'; +import { vegaAdminStyle } from '../adminStyles'; +import { polyglot as polyglotPropTypes } from '../../../propTypes'; + +const VegaFieldPreview = ({ p, args, PreviewComponent }) => { + return ( +
+ + {p.t('vega_chart_preview')} + + +
+ ); +}; + +VegaFieldPreview.propTypes = { + p: polyglotPropTypes.isRequired, + args: PropTypes.any.isRequired, + PreviewComponent: PropTypes.element.isRequired, +}; + +export default translate(VegaFieldPreview); diff --git a/src/app/js/formats/vega-utils/components/VegaFieldSet.js b/src/app/js/formats/vega-utils/components/VegaFieldSet.js new file mode 100644 index 000000000..effdb8a1a --- /dev/null +++ b/src/app/js/formats/vega-utils/components/VegaFieldSet.js @@ -0,0 +1,28 @@ +import React from 'react'; +import { vegaAdminStyle } from '../adminStyles'; +import { Box } from '@mui/material'; +import PropTypes from 'prop-types'; + +const VegaFieldSet = ({ children, title }) => { + return ( +
+ {title} + + {children} + +
+ ); +}; + +VegaFieldSet.propTypes = { + children: PropTypes.node.isRequired, + title: PropTypes.string.isRequired, +}; + +export default VegaFieldSet; diff --git a/src/app/js/formats/shared/ToolTips.js b/src/app/js/formats/vega-utils/components/VegaToolTips.js similarity index 97% rename from src/app/js/formats/shared/ToolTips.js rename to src/app/js/formats/vega-utils/components/VegaToolTips.js index b898a5abc..1b938b46d 100644 --- a/src/app/js/formats/shared/ToolTips.js +++ b/src/app/js/formats/vega-utils/components/VegaToolTips.js @@ -1,12 +1,12 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { Checkbox, TextField, FormControlLabel, Box } from '@mui/material'; -import { polyglot as polyglotPropTypes } from '../../propTypes'; +import { polyglot as polyglotPropTypes } from '../../../propTypes'; /** * React component use for edit the tooltip */ -class ToolTips extends Component { +class VegaToolTips extends Component { /** * Default args taken by the component */ @@ -171,4 +171,4 @@ class ToolTips extends Component { } } -export default ToolTips; +export default VegaToolTips; diff --git a/src/app/js/formats/vega/component/flow-map/FlowMapAdmin.js b/src/app/js/formats/vega/component/flow-map/FlowMapAdmin.js index ef41c4628..bc95b9684 100644 --- a/src/app/js/formats/vega/component/flow-map/FlowMapAdmin.js +++ b/src/app/js/formats/vega/component/flow-map/FlowMapAdmin.js @@ -4,13 +4,13 @@ import translate from 'redux-polyglot/translate'; import { polyglot as polyglotPropTypes } from '../../../../propTypes'; import updateAdminArgs from '../../../shared/updateAdminArgs'; import RoutineParamsAdmin from '../../../shared/RoutineParamsAdmin'; -import ToolTips from '../../../shared/ToolTips'; +import VegaToolTips from '../../../vega-utils/components/VegaToolTips'; import ColorPickerParamsAdmin from '../../../shared/ColorPickerParamsAdmin'; import { schemeBlues } from 'd3-scale-chromatic'; import { GradientSchemeSelector } from '../../../../lib/components/ColorSchemeSelector'; import { Box, FormControlLabel, FormGroup, Switch } from '@mui/material'; import FlowMap from '../../models/FlowMap'; -import VegaAdvancedMode from '../../../shared/VegaAdvancedMode'; +import VegaAdvancedMode from '../../../vega-utils/components/VegaAdvancedMode'; export const defaultArgs = { params: { @@ -170,7 +170,7 @@ const FlowMapAdmin = props => { polyglot={polyglot} monochromatic={true} /> - { /> ) : ( <> - Date: Fri, 24 Nov 2023 08:11:26 +0100 Subject: [PATCH 02/11] feat: add preview and new ux for vega chart --- src/app/js/formats/vega-lite/VegaLiteAdmin.js | 99 ++++++++------- .../vega/component/flow-map/FlowMapAdmin.js | 107 +++++++++------- .../vega/component/flow-map/FlowMapView.js | 19 ++- .../component/radar-chart/RadarChartAdmin.js | 119 ++++++++++-------- .../component/radar-chart/RadarChartView.js | 16 +++ 5 files changed, 210 insertions(+), 150 deletions(-) diff --git a/src/app/js/formats/vega-lite/VegaLiteAdmin.js b/src/app/js/formats/vega-lite/VegaLiteAdmin.js index 7554f6172..657a9f697 100644 --- a/src/app/js/formats/vega-lite/VegaLiteAdmin.js +++ b/src/app/js/formats/vega-lite/VegaLiteAdmin.js @@ -7,6 +7,7 @@ import { polyglot as polyglotPropTypes } from '../../propTypes'; import updateAdminArgs from '../shared/updateAdminArgs'; import RoutineParamsAdmin from '../shared/RoutineParamsAdmin'; import VegaAdvancedMode from '../vega-utils/components/VegaAdvancedMode'; +import VegaFieldSet from '../vega-utils/components/VegaFieldSet'; export const defaultArgs = { params: { @@ -61,54 +62,58 @@ const VegaLiteAdmin = props => { justifyContent="space-between" gap={2} > - - - + - - {p.t('vega_size_step')} - - - - + + + + + + {p.t('vega_size_step')} + + + + + ); }; diff --git a/src/app/js/formats/vega/component/flow-map/FlowMapAdmin.js b/src/app/js/formats/vega/component/flow-map/FlowMapAdmin.js index bc95b9684..e984c6e11 100644 --- a/src/app/js/formats/vega/component/flow-map/FlowMapAdmin.js +++ b/src/app/js/formats/vega/component/flow-map/FlowMapAdmin.js @@ -11,6 +11,9 @@ import { GradientSchemeSelector } from '../../../../lib/components/ColorSchemeSe import { Box, FormControlLabel, FormGroup, Switch } from '@mui/material'; import FlowMap from '../../models/FlowMap'; import VegaAdvancedMode from '../../../vega-utils/components/VegaAdvancedMode'; +import VegaFieldPreview from '../../../vega-utils/components/VegaFieldPreview'; +import { FlowMapAdminView } from './FlowMapView'; +import VegaFieldSet from '../../../vega-utils/components/VegaFieldSet'; export const defaultArgs = { params: { @@ -131,57 +134,65 @@ const FlowMapAdmin = props => { justifyContent="space-between" gap={2} > - - - } - label={polyglot.t('advancedMode')} - /> - - - {advancedMode ? ( - + - ) : ( - <> - - + + + + } + label={polyglot.t('advancedMode')} /> - + {advancedMode ? ( + - - )} + ) : ( + <> + + + + + )} + + ); }; diff --git a/src/app/js/formats/vega/component/flow-map/FlowMapView.js b/src/app/js/formats/vega/component/flow-map/FlowMapView.js index 7c073613b..6dc7b24b4 100644 --- a/src/app/js/formats/vega/component/flow-map/FlowMapView.js +++ b/src/app/js/formats/vega/component/flow-map/FlowMapView.js @@ -1,4 +1,4 @@ -import React, { useEffect, useMemo, useRef, useState } from 'react'; +import React, { useMemo, useState } from 'react'; import injectData from '../../../injectData'; import { connect } from 'react-redux'; import compose from 'recompose/compose'; @@ -127,4 +127,21 @@ const mapStateToProps = (state, { formatData }) => { }; }; +export const FlowMapAdminView = connect((state, props) => { + return { + ...props, + field: { + format: 'Preview Format', + }, + data: { + values: [ + { source: 'FRA', target: 'JPN', weight: 28 }, + { source: 'FRA', target: 'GBR', weight: 55 }, + { source: 'FRA', target: 'CAN', weight: 43 }, + { source: 'FRA', target: 'TUN', weight: 15 }, + ], + }, + }; +})(FlowMapView); + export default compose(injectData(), connect(mapStateToProps))(FlowMapView); diff --git a/src/app/js/formats/vega/component/radar-chart/RadarChartAdmin.js b/src/app/js/formats/vega/component/radar-chart/RadarChartAdmin.js index 2dbffc496..9c948fa57 100644 --- a/src/app/js/formats/vega/component/radar-chart/RadarChartAdmin.js +++ b/src/app/js/formats/vega/component/radar-chart/RadarChartAdmin.js @@ -20,6 +20,9 @@ import VegaToolTips from '../../../vega-utils/components/VegaToolTips'; import VegaAdvancedMode from '../../../vega-utils/components/VegaAdvancedMode'; import RadarChart from '../../models/RadarChart'; import { lodexScaleToIdScale } from '../../../chartsUtils'; +import VegaFieldSet from '../../../vega-utils/components/VegaFieldSet'; +import VegaFieldPreview from '../../../vega-utils/components/VegaFieldPreview'; +import { RadarChartAdminView } from './RadarChartView'; export const defaultArgs = { params: { @@ -153,62 +156,70 @@ const RadarChartAdmin = props => { label={polyglot.t('advancedMode')} /> - - {advancedMode ? ( - + - ) : ( - <> - - + + {advancedMode ? ( + - - } - label={polyglot.t('axis_round_value')} - /> - - - {polyglot.t('linear')} - - {polyglot.t('log')} - - - )} + ) : ( + <> + + + + } + label={polyglot.t('axis_round_value')} + /> + + + {polyglot.t('linear')} + + {polyglot.t('log')} + + + )} + + ); }; diff --git a/src/app/js/formats/vega/component/radar-chart/RadarChartView.js b/src/app/js/formats/vega/component/radar-chart/RadarChartView.js index 225b54495..975a98452 100644 --- a/src/app/js/formats/vega/component/radar-chart/RadarChartView.js +++ b/src/app/js/formats/vega/component/radar-chart/RadarChartView.js @@ -134,4 +134,20 @@ const mapStateToProps = (state, { formatData }) => { }; }; +export const RadarChartAdminView = connect((state, props) => { + return { + ...props, + field: { + format: 'Preview Format', + }, + data: { + values: [ + { _id: 'A', value: 28 }, + { _id: 'B', value: 55 }, + { _id: 'C', value: 43 }, + ], + }, + }; +})(RadarChartView); + export default compose(injectData(), connect(mapStateToProps))(RadarChartView); From ecb90661f2c6d87543317e987ee7eabe1c4741d6 Mon Sep 17 00:00:00 2001 From: AlasDiablo <25723276+AlasDiablo@users.noreply.github.com> Date: Thu, 30 Nov 2023 11:20:49 +0100 Subject: [PATCH 03/11] feat: add a dataset system and refactor some components --- src/app/custom/translations.tsv | 5 +- .../component/bar-chart/BarChartAdmin.js | 17 ++-- .../component/bubble-plot/BubblePlotAdmin.js | 16 ++-- .../component/cartography/CartographyAdmin.js | 13 +-- .../component/heatmap/HeatMapAdmin.js | 21 +++-- .../component/pie-chart/PieChartAdmin.js | 16 ++-- .../vega-utils/components/VegaFieldPreview.js | 90 ++++++++++++++++++- .../vega-utils/components/VegaFieldSet.js | 33 ++++++- src/app/js/formats/vega-utils/dataSet.js | 33 +++++++ .../vega/component/flow-map/FlowMapAdmin.js | 18 ++-- .../component/radar-chart/RadarChartAdmin.js | 38 ++++---- 11 files changed, 244 insertions(+), 56 deletions(-) create mode 100644 src/app/js/formats/vega-utils/dataSet.js diff --git a/src/app/custom/translations.tsv b/src/app/custom/translations.tsv index 07d4fe2c6..0e450dd31 100644 --- a/src/app/custom/translations.tsv +++ b/src/app/custom/translations.tsv @@ -1017,4 +1017,7 @@ vega_variable_list You can use these variables to set the size dynamically: Vous vega_variable_width Replace with the width of the chart container Remplacée par la largeur du conteneur du graphique vega_variable_height Replace with the height of the chart container Remplacée par la hauteur du conteneur du graphique theme Application theme Thème de l'application -"error_precomputed_data_empty" "Precomputed data is empty or unfinished. You might want to relaunch the action" "Les données précalculées sont vides ou non terminées. Vous pouvez relancer l'action" \ No newline at end of file +"error_precomputed_data_empty" "Precomputed data is empty or unfinished. You might want to relaunch the action" "Les données précalculées sont vides ou non terminées. Vous pouvez relancer l'action" +format_data_params Data Parameters Paramètres de Données +format_chart_params Chart Parameters Paramètres du Graphique +format_preview Format Preview Aperçu du Format diff --git a/src/app/js/formats/vega-lite/component/bar-chart/BarChartAdmin.js b/src/app/js/formats/vega-lite/component/bar-chart/BarChartAdmin.js index 34bdc7938..b75fcbcee 100644 --- a/src/app/js/formats/vega-lite/component/bar-chart/BarChartAdmin.js +++ b/src/app/js/formats/vega-lite/component/bar-chart/BarChartAdmin.js @@ -26,8 +26,12 @@ import { } from '../../../chartsUtils'; import VegaAdvancedMode from '../../../vega-utils/components/VegaAdvancedMode'; import { BarChartAdminView } from './BarChartView'; -import VegaFieldSet from '../../../vega-utils/components/VegaFieldSet'; +import { + VegaChartParamsFieldSet, + VegaDataParamsFieldSet, +} from '../../../vega-utils/components/VegaFieldSet'; import VegaFieldPreview from '../../../vega-utils/components/VegaFieldPreview'; +import { StandardIdValue } from '../../../vega-utils/dataSet'; export const defaultArgs = { params: { @@ -190,7 +194,7 @@ const BarChartAdmin = props => { justifyContent="space-between" gap={2} > - + { showMinValue={showMinValue} showOrderBy={showOrderBy} /> - - + + { {polyglot.t('log')} )} - + ); diff --git a/src/app/js/formats/vega-lite/component/bubble-plot/BubblePlotAdmin.js b/src/app/js/formats/vega-lite/component/bubble-plot/BubblePlotAdmin.js index 0dcf5bf3f..be46b779b 100644 --- a/src/app/js/formats/vega-lite/component/bubble-plot/BubblePlotAdmin.js +++ b/src/app/js/formats/vega-lite/component/bubble-plot/BubblePlotAdmin.js @@ -18,9 +18,13 @@ import { MULTICHROMATIC_DEFAULT_COLORSET } from '../../../colorUtils'; import BubblePlot from '../../models/BubblePlot'; import { lodexOrderToIdOrder } from '../../../chartsUtils'; import VegaAdvancedMode from '../../../vega-utils/components/VegaAdvancedMode'; -import VegaFieldSet from '../../../vega-utils/components/VegaFieldSet'; +import { + VegaChartParamsFieldSet, + VegaDataParamsFieldSet, +} from '../../../vega-utils/components/VegaFieldSet'; import { BubblePlotAdminView } from './BubblePlotView'; import VegaFieldPreview from '../../../vega-utils/components/VegaFieldPreview'; +import { StandardSourceTargetWeight } from '../../../vega-utils/dataSet'; export const defaultArgs = { params: { @@ -139,7 +143,7 @@ const BubblePlotAdmin = props => { justifyContent="space-between" gap={2} > - + { showMinValue={showMinValue} showOrderBy={showOrderBy} /> - - + + { /> )} - + ); diff --git a/src/app/js/formats/vega-lite/component/cartography/CartographyAdmin.js b/src/app/js/formats/vega-lite/component/cartography/CartographyAdmin.js index 1fc5cb974..69c46934e 100644 --- a/src/app/js/formats/vega-lite/component/cartography/CartographyAdmin.js +++ b/src/app/js/formats/vega-lite/component/cartography/CartographyAdmin.js @@ -19,7 +19,10 @@ import VegaToolTips from '../../../vega-utils/components/VegaToolTips'; import { MAP_EUROPE, MAP_FRANCE, MAP_WORLD } from '../../../chartsUtils'; import Cartography from '../../models/Cartography'; import VegaAdvancedMode from '../../../vega-utils/components/VegaAdvancedMode'; -import VegaFieldSet from '../../../vega-utils/components/VegaFieldSet'; +import { + VegaChartParamsFieldSet, + VegaDataParamsFieldSet, +} from '../../../vega-utils/components/VegaFieldSet'; export const defaultArgs = { params: { @@ -131,7 +134,7 @@ const CartographyAdmin = props => { justifyContent="space-between" gap={2} > - + { showMinValue={showMinValue} showOrderBy={showOrderBy} /> - - + + { /> )} - + ); }; diff --git a/src/app/js/formats/vega-lite/component/heatmap/HeatMapAdmin.js b/src/app/js/formats/vega-lite/component/heatmap/HeatMapAdmin.js index c3113608d..0b0432c22 100644 --- a/src/app/js/formats/vega-lite/component/heatmap/HeatMapAdmin.js +++ b/src/app/js/formats/vega-lite/component/heatmap/HeatMapAdmin.js @@ -19,8 +19,12 @@ import HeatMap from '../../models/HeatMap'; import { lodexOrderToIdOrder } from '../../../chartsUtils'; import VegaAdvancedMode from '../../../vega-utils/components/VegaAdvancedMode'; import { HeatMapAdminView } from './HeatMapView'; -import VegaFieldSet from '../../../vega-utils/components/VegaFieldSet'; +import { + VegaChartParamsFieldSet, + VegaDataParamsFieldSet, +} from '../../../vega-utils/components/VegaFieldSet'; import VegaFieldPreview from '../../../vega-utils/components/VegaFieldPreview'; +import { StandardSourceTargetWeight } from '../../../vega-utils/dataSet'; export const defaultArgs = { params: { @@ -141,7 +145,7 @@ const HeatMapAdmin = props => { justifyContent="space-between" gap={2} > - + { showMinValue={showMinValue} showOrderBy={showOrderBy} /> - - + + { /> )} - - + + ); }; diff --git a/src/app/js/formats/vega-lite/component/pie-chart/PieChartAdmin.js b/src/app/js/formats/vega-lite/component/pie-chart/PieChartAdmin.js index 51479a707..4e830628a 100644 --- a/src/app/js/formats/vega-lite/component/pie-chart/PieChartAdmin.js +++ b/src/app/js/formats/vega-lite/component/pie-chart/PieChartAdmin.js @@ -17,9 +17,13 @@ import { MULTICHROMATIC_DEFAULT_COLORSET } from '../../../colorUtils'; import VegaToolTips from '../../../vega-utils/components/VegaToolTips'; import PieChart from '../../models/PieChart'; import VegaAdvancedMode from '../../../vega-utils/components/VegaAdvancedMode'; -import VegaFieldSet from '../../../vega-utils/components/VegaFieldSet'; +import { + VegaChartParamsFieldSet, + VegaDataParamsFieldSet, +} from '../../../vega-utils/components/VegaFieldSet'; import VegaFieldPreview from '../../../vega-utils/components/VegaFieldPreview'; import { PieChartAdminView } from './PieChartView'; +import { StandardIdValue } from '../../../vega-utils/dataSet'; export const defaultArgs = { params: { @@ -129,7 +133,7 @@ const PieChartAdmin = props => { justifyContent="space-between" gap={2} > - + { showMinValue={showMinValue} showOrderBy={showOrderBy} /> - - + + { /> )} - + ); diff --git a/src/app/js/formats/vega-utils/components/VegaFieldPreview.js b/src/app/js/formats/vega-utils/components/VegaFieldPreview.js index 079e1cd73..bca641f20 100644 --- a/src/app/js/formats/vega-utils/components/VegaFieldPreview.js +++ b/src/app/js/formats/vega-utils/components/VegaFieldPreview.js @@ -1,23 +1,105 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import PropTypes from 'prop-types'; import translate from 'redux-polyglot/translate'; import { vegaAdminStyle } from '../adminStyles'; import { polyglot as polyglotPropTypes } from '../../../propTypes'; +import { MenuItem, Select } from '@mui/material'; +import { + MapSourceTargetWeight, + StandardIdValue, + StandardSourceTargetWeight, +} from '../dataSet'; + +const VegaFieldPreview = ({ + p, + args, + showDatasetsSelector, + datasets, + PreviewComponent, +}) => { + // See note in JSX + // const ReactJson = require('react-json-view').default; + + const [datasetName, setDatasetName] = useState(datasets[0].name); + const [dataset, setDataset] = useState({}); + + useEffect(() => { + const newSet = datasets.find(value => value.name === datasetName); + setDataset({ + values: newSet.values, + }); + }, [datasetName]); + + const handleDataSetChange = event => { + setDatasetName(event.target.value); + }; + + // See note in JSX + // const handleDataSetEditor = event => { + // setDataset(event.updated_src); + // }; -const VegaFieldPreview = ({ p, args, PreviewComponent }) => { return (
- {p.t('vega_chart_preview')} + {p.t('format_preview')} - + {showDatasetsSelector ? ( + + ) : null} +
+ +
+ {/* TODO: Make the chart updated when data is change (this event is handled correctly but the chart is not updated) */} + {/**/}
); }; +VegaFieldPreview.defaultProps = { + showDatasetsSelector: true, + datasets: [ + StandardIdValue, + StandardSourceTargetWeight, + MapSourceTargetWeight, + ], +}; + VegaFieldPreview.propTypes = { p: polyglotPropTypes.isRequired, args: PropTypes.any.isRequired, + showDatasetsSelector: PropTypes.bool, + datasets: PropTypes.arrayOf( + PropTypes.shape({ + name: PropTypes.string.isRequired, + values: PropTypes.any.isRequired, + }), + ), PreviewComponent: PropTypes.element.isRequired, }; diff --git a/src/app/js/formats/vega-utils/components/VegaFieldSet.js b/src/app/js/formats/vega-utils/components/VegaFieldSet.js index effdb8a1a..42ebcc976 100644 --- a/src/app/js/formats/vega-utils/components/VegaFieldSet.js +++ b/src/app/js/formats/vega-utils/components/VegaFieldSet.js @@ -2,11 +2,13 @@ import React from 'react'; import { vegaAdminStyle } from '../adminStyles'; import { Box } from '@mui/material'; import PropTypes from 'prop-types'; +import { polyglot as polyglotPropTypes } from '../../../propTypes'; +import translate from 'redux-polyglot/translate'; -const VegaFieldSet = ({ children, title }) => { +const VegaFieldSet = ({ children, title, p }) => { return (
- {title} + {p.t(title)} { VegaFieldSet.propTypes = { children: PropTypes.node.isRequired, title: PropTypes.string.isRequired, + p: polyglotPropTypes.isRequired, }; -export default VegaFieldSet; +const TranslatedVegaFieldSet = translate(VegaFieldSet); + +export const VegaChartParamsFieldSet = ({ children }) => { + return ( + + {children} + + ); +}; + +VegaChartParamsFieldSet.propTypes = { + children: PropTypes.node.isRequired, +}; + +export const VegaDataParamsFieldSet = ({ children }) => { + return ( + + {children} + + ); +}; + +VegaDataParamsFieldSet.propTypes = { + children: PropTypes.node.isRequired, +}; diff --git a/src/app/js/formats/vega-utils/dataSet.js b/src/app/js/formats/vega-utils/dataSet.js new file mode 100644 index 000000000..2059c66bc --- /dev/null +++ b/src/app/js/formats/vega-utils/dataSet.js @@ -0,0 +1,33 @@ +export const StandardIdValue = { + name: 'Standard - _id / value', + values: [ + { _id: 'A', value: 28 }, + { _id: 'B', value: 55 }, + { _id: 'C', value: 43 }, + ], +}; + +export const StandardSourceTargetWeight = { + name: 'Standard - source / target / weight', + values: [ + { source: 'A', target: 'A', weight: 28 }, + { source: 'A', target: 'B', weight: 55 }, + { source: 'A', target: 'C', weight: 43 }, + { source: 'B', target: 'A', weight: 15 }, + { source: 'B', target: 'B', weight: 68 }, + { source: 'B', target: 'C', weight: 45 }, + { source: 'C', target: 'A', weight: 85 }, + { source: 'C', target: 'B', weight: 32 }, + { source: 'C', target: 'C', weight: 17 }, + ], +}; + +export const MapSourceTargetWeight = { + name: 'Map - source / target / weight', + values: [ + { source: 'FRA', target: 'JPN', weight: 28 }, + { source: 'FRA', target: 'GBR', weight: 55 }, + { source: 'FRA', target: 'CAN', weight: 43 }, + { source: 'FRA', target: 'TUN', weight: 15 }, + ], +}; diff --git a/src/app/js/formats/vega/component/flow-map/FlowMapAdmin.js b/src/app/js/formats/vega/component/flow-map/FlowMapAdmin.js index e984c6e11..60faebe01 100644 --- a/src/app/js/formats/vega/component/flow-map/FlowMapAdmin.js +++ b/src/app/js/formats/vega/component/flow-map/FlowMapAdmin.js @@ -13,7 +13,11 @@ import FlowMap from '../../models/FlowMap'; import VegaAdvancedMode from '../../../vega-utils/components/VegaAdvancedMode'; import VegaFieldPreview from '../../../vega-utils/components/VegaFieldPreview'; import { FlowMapAdminView } from './FlowMapView'; -import VegaFieldSet from '../../../vega-utils/components/VegaFieldSet'; +import VegaFieldSet, { + VegaChartParamsFieldSet, + VegaDataParamsFieldSet, +} from '../../../vega-utils/components/VegaFieldSet'; +import { MapSourceTargetWeight } from '../../../vega-utils/dataSet'; export const defaultArgs = { params: { @@ -134,7 +138,7 @@ const FlowMapAdmin = props => { justifyContent="space-between" gap={2} > - + { showMinValue={showMinValue} showOrderBy={showOrderBy} /> - - + + { /> )} - + ); diff --git a/src/app/js/formats/vega/component/radar-chart/RadarChartAdmin.js b/src/app/js/formats/vega/component/radar-chart/RadarChartAdmin.js index 9c948fa57..693a708d7 100644 --- a/src/app/js/formats/vega/component/radar-chart/RadarChartAdmin.js +++ b/src/app/js/formats/vega/component/radar-chart/RadarChartAdmin.js @@ -20,9 +20,13 @@ import VegaToolTips from '../../../vega-utils/components/VegaToolTips'; import VegaAdvancedMode from '../../../vega-utils/components/VegaAdvancedMode'; import RadarChart from '../../models/RadarChart'; import { lodexScaleToIdScale } from '../../../chartsUtils'; -import VegaFieldSet from '../../../vega-utils/components/VegaFieldSet'; +import VegaFieldSet, { + VegaChartParamsFieldSet, + VegaDataParamsFieldSet, +} from '../../../vega-utils/components/VegaFieldSet'; import VegaFieldPreview from '../../../vega-utils/components/VegaFieldPreview'; import { RadarChartAdminView } from './RadarChartView'; +import { StandardIdValue } from '../../../vega-utils/dataSet'; export const defaultArgs = { params: { @@ -145,18 +149,7 @@ const RadarChartAdmin = props => { justifyContent="space-between" gap={2} > - - - } - label={polyglot.t('advancedMode')} - /> - - + { showMinValue={showMinValue} showOrderBy={showOrderBy} /> - - + + + + + } + label={polyglot.t('advancedMode')} + /> + {advancedMode ? ( { )} - + ); From aa8fdf38de0615087ffb213fe558580b0042e8d6 Mon Sep 17 00:00:00 2001 From: AlasDiablo <25723276+AlasDiablo@users.noreply.github.com> Date: Thu, 30 Nov 2023 11:34:14 +0100 Subject: [PATCH 04/11] fix: add support for the dataset modification --- .../component/bar-chart/BarChartView.js | 6 +-- .../component/bubble-plot/BubblePlotView.js | 12 +----- .../component/heatmap/HeatMapView.js | 12 +----- .../component/pie-chart/PieChartView.js | 6 +-- .../vega-utils/components/VegaFieldPreview.js | 37 +++++++++---------- .../vega/component/flow-map/FlowMapAdmin.js | 2 +- .../vega/component/flow-map/FlowMapView.js | 7 +--- .../component/radar-chart/RadarChartView.js | 6 +-- 8 files changed, 24 insertions(+), 64 deletions(-) diff --git a/src/app/js/formats/vega-lite/component/bar-chart/BarChartView.js b/src/app/js/formats/vega-lite/component/bar-chart/BarChartView.js index b48d25660..e66ab0ed6 100644 --- a/src/app/js/formats/vega-lite/component/bar-chart/BarChartView.js +++ b/src/app/js/formats/vega-lite/component/bar-chart/BarChartView.js @@ -164,11 +164,7 @@ export const BarChartAdminView = connect((state, props) => { format: 'Preview Format', }, data: { - values: [ - { _id: 'A', value: 28 }, - { _id: 'B', value: 55 }, - { _id: 'C', value: 43 }, - ], + values: props.dataset.values ?? [], }, }; })(BarChartView); diff --git a/src/app/js/formats/vega-lite/component/bubble-plot/BubblePlotView.js b/src/app/js/formats/vega-lite/component/bubble-plot/BubblePlotView.js index d098d82b4..49f71f687 100644 --- a/src/app/js/formats/vega-lite/component/bubble-plot/BubblePlotView.js +++ b/src/app/js/formats/vega-lite/component/bubble-plot/BubblePlotView.js @@ -130,17 +130,7 @@ export const BubblePlotAdminView = connect((state, props) => { format: 'Preview Format', }, data: { - values: [ - { source: 'A', target: 'A', weight: 28 }, - { source: 'A', target: 'B', weight: 55 }, - { source: 'A', target: 'C', weight: 43 }, - { source: 'B', target: 'A', weight: 15 }, - { source: 'B', target: 'B', weight: 68 }, - { source: 'B', target: 'C', weight: 45 }, - { source: 'C', target: 'A', weight: 85 }, - { source: 'C', target: 'B', weight: 32 }, - { source: 'C', target: 'C', weight: 17 }, - ], + values: props.dataset.values ?? [], }, }; })(BubblePlotView); diff --git a/src/app/js/formats/vega-lite/component/heatmap/HeatMapView.js b/src/app/js/formats/vega-lite/component/heatmap/HeatMapView.js index 005fb5c55..c6a439b8c 100644 --- a/src/app/js/formats/vega-lite/component/heatmap/HeatMapView.js +++ b/src/app/js/formats/vega-lite/component/heatmap/HeatMapView.js @@ -130,17 +130,7 @@ export const HeatMapAdminView = connect((state, props) => { format: 'Preview Format', }, data: { - values: [ - { source: 'A', target: 'A', weight: 28 }, - { source: 'A', target: 'B', weight: 55 }, - { source: 'A', target: 'C', weight: 43 }, - { source: 'B', target: 'A', weight: 15 }, - { source: 'B', target: 'B', weight: 68 }, - { source: 'B', target: 'C', weight: 45 }, - { source: 'C', target: 'A', weight: 85 }, - { source: 'C', target: 'B', weight: 32 }, - { source: 'C', target: 'C', weight: 17 }, - ], + values: props.dataset.values ?? [], }, }; })(HeatMapView); diff --git a/src/app/js/formats/vega-lite/component/pie-chart/PieChartView.js b/src/app/js/formats/vega-lite/component/pie-chart/PieChartView.js index 614a71e32..ee481d5cb 100644 --- a/src/app/js/formats/vega-lite/component/pie-chart/PieChartView.js +++ b/src/app/js/formats/vega-lite/component/pie-chart/PieChartView.js @@ -131,11 +131,7 @@ export const PieChartAdminView = connect((state, props) => { format: 'Preview Format', }, data: { - values: [ - { _id: 'A', value: 28 }, - { _id: 'B', value: 55 }, - { _id: 'C', value: 43 }, - ], + values: props.dataset.values ?? [], }, }; })(PieChartView); diff --git a/src/app/js/formats/vega-utils/components/VegaFieldPreview.js b/src/app/js/formats/vega-utils/components/VegaFieldPreview.js index bca641f20..e17833f6c 100644 --- a/src/app/js/formats/vega-utils/components/VegaFieldPreview.js +++ b/src/app/js/formats/vega-utils/components/VegaFieldPreview.js @@ -17,8 +17,7 @@ const VegaFieldPreview = ({ datasets, PreviewComponent, }) => { - // See note in JSX - // const ReactJson = require('react-json-view').default; + const ReactJson = require('react-json-view').default; const [datasetName, setDatasetName] = useState(datasets[0].name); const [dataset, setDataset] = useState({}); @@ -34,10 +33,9 @@ const VegaFieldPreview = ({ setDatasetName(event.target.value); }; - // See note in JSX - // const handleDataSetEditor = event => { - // setDataset(event.updated_src); - // }; + const handleDataSetEditor = event => { + setDataset(event.updated_src); + }; return (
@@ -63,20 +61,19 @@ const VegaFieldPreview = ({
- {/* TODO: Make the chart updated when data is change (this event is handled correctly but the chart is not updated) */} - {/**/} +
); }; diff --git a/src/app/js/formats/vega/component/flow-map/FlowMapAdmin.js b/src/app/js/formats/vega/component/flow-map/FlowMapAdmin.js index 60faebe01..938bfd22b 100644 --- a/src/app/js/formats/vega/component/flow-map/FlowMapAdmin.js +++ b/src/app/js/formats/vega/component/flow-map/FlowMapAdmin.js @@ -194,7 +194,7 @@ const FlowMapAdmin = props => { )} { format: 'Preview Format', }, data: { - values: [ - { source: 'FRA', target: 'JPN', weight: 28 }, - { source: 'FRA', target: 'GBR', weight: 55 }, - { source: 'FRA', target: 'CAN', weight: 43 }, - { source: 'FRA', target: 'TUN', weight: 15 }, - ], + values: props.dataset.values ?? [], }, }; })(FlowMapView); diff --git a/src/app/js/formats/vega/component/radar-chart/RadarChartView.js b/src/app/js/formats/vega/component/radar-chart/RadarChartView.js index 975a98452..53cf9e8c2 100644 --- a/src/app/js/formats/vega/component/radar-chart/RadarChartView.js +++ b/src/app/js/formats/vega/component/radar-chart/RadarChartView.js @@ -141,11 +141,7 @@ export const RadarChartAdminView = connect((state, props) => { format: 'Preview Format', }, data: { - values: [ - { _id: 'A', value: 28 }, - { _id: 'B', value: 55 }, - { _id: 'C', value: 43 }, - ], + values: props.dataset.values ?? [], }, }; })(RadarChartView); From dafc3d26885210e2e6a682c506f618583f13dca8 Mon Sep 17 00:00:00 2001 From: AlasDiablo <25723276+AlasDiablo@users.noreply.github.com> Date: Fri, 1 Dec 2023 09:14:10 +0100 Subject: [PATCH 05/11] fix: Use a dataset array in Bubble Plot and Heat Map --- .../formats/vega-lite/component/bubble-plot/BubblePlotAdmin.js | 2 +- src/app/js/formats/vega-lite/component/heatmap/HeatMapAdmin.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/js/formats/vega-lite/component/bubble-plot/BubblePlotAdmin.js b/src/app/js/formats/vega-lite/component/bubble-plot/BubblePlotAdmin.js index be46b779b..53eb98c3b 100644 --- a/src/app/js/formats/vega-lite/component/bubble-plot/BubblePlotAdmin.js +++ b/src/app/js/formats/vega-lite/component/bubble-plot/BubblePlotAdmin.js @@ -206,7 +206,7 @@ const BubblePlotAdmin = props => { diff --git a/src/app/js/formats/vega-lite/component/heatmap/HeatMapAdmin.js b/src/app/js/formats/vega-lite/component/heatmap/HeatMapAdmin.js index 0b0432c22..6de4ed480 100644 --- a/src/app/js/formats/vega-lite/component/heatmap/HeatMapAdmin.js +++ b/src/app/js/formats/vega-lite/component/heatmap/HeatMapAdmin.js @@ -208,7 +208,7 @@ const HeatMapAdmin = props => { From af04f54a672d64830b8993be1965c9c06abb92a2 Mon Sep 17 00:00:00 2001 From: AlasDiablo <25723276+AlasDiablo@users.noreply.github.com> Date: Fri, 1 Dec 2023 15:11:13 +0100 Subject: [PATCH 06/11] refactor: add aspect ratio and fix cartography calling url --- src/app/custom/translations.tsv | 2 +- src/app/js/formats/aspectRatio.js | 7 ++ .../component/bar-chart/BarChartView.js | 2 + .../component/bubble-plot/BubblePlotView.js | 2 + .../component/heatmap/HeatMapView.js | 2 + .../component/pie-chart/PieChartView.js | 2 + .../vega-lite-component/VegaLiteComponent.js | 44 +++++--- .../js/formats/vega-lite/models/BubblePlot.js | 10 +- .../formats/vega-lite/models/Cartography.js | 101 +++++------------- .../js/formats/vega-lite/models/HeatMap.js | 8 +- .../js/formats/vega-lite/models/PieChart.js | 7 +- .../vega-lite/models/json/cartography.vl.json | 4 - .../vega-lite/models/topojson/readme.md | 5 + 13 files changed, 91 insertions(+), 105 deletions(-) create mode 100644 src/app/js/formats/aspectRatio.js create mode 100644 src/app/js/formats/vega-lite/models/topojson/readme.md diff --git a/src/app/custom/translations.tsv b/src/app/custom/translations.tsv index 0e450dd31..a69e5cc26 100644 --- a/src/app/custom/translations.tsv +++ b/src/app/custom/translations.tsv @@ -1018,6 +1018,6 @@ vega_variable_width Replace with the width of the chart container Remplacée par vega_variable_height Replace with the height of the chart container Remplacée par la hauteur du conteneur du graphique theme Application theme Thème de l'application "error_precomputed_data_empty" "Precomputed data is empty or unfinished. You might want to relaunch the action" "Les données précalculées sont vides ou non terminées. Vous pouvez relancer l'action" -format_data_params Data Parameters Paramètres de Données +format_data_params Data Parameters Paramètres des Données format_chart_params Chart Parameters Paramètres du Graphique format_preview Format Preview Aperçu du Format diff --git a/src/app/js/formats/aspectRatio.js b/src/app/js/formats/aspectRatio.js new file mode 100644 index 000000000..2e9b27253 --- /dev/null +++ b/src/app/js/formats/aspectRatio.js @@ -0,0 +1,7 @@ +// You can find aspect ratio preview at: https://www.w3schools.com/howto/howto_css_aspect_ratio.asp +export const ASPECT_RATIO_1_1 = '1 / 1'; +export const ASPECT_RATIO_3_2 = '3 / 2'; +export const ASPECT_RATIO_4_3 = '4 / 3'; +export const ASPECT_RATIO_8_5 = '8 / 5'; +export const ASPECT_RATIO_16_6 = '16 / 6'; +export const ASPECT_RATIO_16_9 = '16 / 9'; diff --git a/src/app/js/formats/vega-lite/component/bar-chart/BarChartView.js b/src/app/js/formats/vega-lite/component/bar-chart/BarChartView.js index e66ab0ed6..76c165590 100644 --- a/src/app/js/formats/vega-lite/component/bar-chart/BarChartView.js +++ b/src/app/js/formats/vega-lite/component/bar-chart/BarChartView.js @@ -17,6 +17,7 @@ import BarChart from '../../models/BarChart'; import { CustomActionVegaLite } from '../vega-lite-component'; import InvalidFormat from '../../../InvalidFormat'; import { useSizeObserver } from '../../../vega-utils/chartsHooks'; +import { ASPECT_RATIO_16_6 } from '../../../aspectRatio'; const styles = { container: { @@ -109,6 +110,7 @@ const BarChartView = ({ spec={spec} data={data} injectType={VEGA_LITE_DATA_INJECT_TYPE_A} + aspectRatio={ASPECT_RATIO_16_6} /> ); diff --git a/src/app/js/formats/vega-lite/component/bubble-plot/BubblePlotView.js b/src/app/js/formats/vega-lite/component/bubble-plot/BubblePlotView.js index 49f71f687..645c0a2ab 100644 --- a/src/app/js/formats/vega-lite/component/bubble-plot/BubblePlotView.js +++ b/src/app/js/formats/vega-lite/component/bubble-plot/BubblePlotView.js @@ -14,6 +14,7 @@ import { import BubblePlot from '../../models/BubblePlot'; import InvalidFormat from '../../../InvalidFormat'; import { useSizeObserver } from '../../../vega-utils/chartsHooks'; +import { ASPECT_RATIO_1_1 } from '../../../aspectRatio'; const styles = { container: { @@ -86,6 +87,7 @@ const BubblePlotView = ({ spec={spec} data={data} injectType={VEGA_LITE_DATA_INJECT_TYPE_A} + aspectRatio={ASPECT_RATIO_1_1} /> ); diff --git a/src/app/js/formats/vega-lite/component/heatmap/HeatMapView.js b/src/app/js/formats/vega-lite/component/heatmap/HeatMapView.js index c6a439b8c..31befad75 100644 --- a/src/app/js/formats/vega-lite/component/heatmap/HeatMapView.js +++ b/src/app/js/formats/vega-lite/component/heatmap/HeatMapView.js @@ -14,6 +14,7 @@ import { } from '../../../chartsUtils'; import InvalidFormat from '../../../InvalidFormat'; import { useSizeObserver } from '../../../vega-utils/chartsHooks'; +import { ASPECT_RATIO_1_1 } from '../../../aspectRatio'; const styles = { container: { @@ -86,6 +87,7 @@ const HeatMapView = ({ spec={spec} data={data} injectType={VEGA_LITE_DATA_INJECT_TYPE_A} + aspectRatio={ASPECT_RATIO_1_1} /> ); diff --git a/src/app/js/formats/vega-lite/component/pie-chart/PieChartView.js b/src/app/js/formats/vega-lite/component/pie-chart/PieChartView.js index ee481d5cb..5452cf6a5 100644 --- a/src/app/js/formats/vega-lite/component/pie-chart/PieChartView.js +++ b/src/app/js/formats/vega-lite/component/pie-chart/PieChartView.js @@ -13,6 +13,7 @@ import { } from '../../../chartsUtils'; import InvalidFormat from '../../../InvalidFormat'; import { useSizeObserver } from '../../../vega-utils/chartsHooks'; +import { ASPECT_RATIO_8_5 } from '../../../aspectRatio'; const styles = { container: { @@ -85,6 +86,7 @@ const PieChartView = ({ spec={spec} data={data} injectType={VEGA_LITE_DATA_INJECT_TYPE_A} + aspectRatio={ASPECT_RATIO_8_5} /> ); diff --git a/src/app/js/formats/vega-lite/component/vega-lite-component/VegaLiteComponent.js b/src/app/js/formats/vega-lite/component/vega-lite-component/VegaLiteComponent.js index 6b70a997c..6a48f02ef 100644 --- a/src/app/js/formats/vega-lite/component/vega-lite-component/VegaLiteComponent.js +++ b/src/app/js/formats/vega-lite/component/vega-lite-component/VegaLiteComponent.js @@ -5,20 +5,28 @@ import { connect } from 'react-redux'; import deepClone from 'lodash.clonedeep'; import { isAdmin } from '../../../../user'; import { - VEGA_ACTIONS_WIDTH, VEGA_LITE_DATA_INJECT_TYPE_A, VEGA_LITE_DATA_INJECT_TYPE_B, VEGA_LITE_DATA_INJECT_TYPE_C, } from '../../../chartsUtils'; +import { + ASPECT_RATIO_16_6, + ASPECT_RATIO_16_9, + ASPECT_RATIO_1_1, + ASPECT_RATIO_3_1, + ASPECT_RATIO_3_2, + ASPECT_RATIO_4_3, + ASPECT_RATIO_8_5, +} from '../../../aspectRatio'; /** * small component use to handle vega lite display * @param props args taken by the component * @returns {*} React-Vega component */ -function CustomActionVegaLite(props) { +function CustomActionVegaLite({ aspectRatio, user, spec, data, injectType }) { let actions; - if (isAdmin(props.user)) { + if (isAdmin(user)) { actions = { export: { svg: true, @@ -40,23 +48,23 @@ function CustomActionVegaLite(props) { }; } - const spec = props.spec; + const specWithData = spec; - switch (props.injectType) { + switch (injectType) { case VEGA_LITE_DATA_INJECT_TYPE_A: - spec.data = props.data; + specWithData.data = data; break; case VEGA_LITE_DATA_INJECT_TYPE_B: - spec.transform.forEach(e => { + specWithData.transform.forEach(e => { if (e.lookup === 'id') { - e.from.data.values = props.data.values; + e.from.data.values = data.values; } }); break; case VEGA_LITE_DATA_INJECT_TYPE_C: - spec.transform.forEach(e => { + specWithData.transform.forEach(e => { if (e.lookup === 'properties.HASC_2') { - e.from.data.values = props.data.values; + e.from.data.values = data.values; } }); break; @@ -66,14 +74,18 @@ function CustomActionVegaLite(props) { return ( ); } +CustomActionVegaLite.defaultProps = { + aspectRatio: ASPECT_RATIO_16_9, +}; + /** * Element required in the props * @type {{data: Requireable, user: Requireable, spec: Validator>}} @@ -83,6 +95,14 @@ CustomActionVegaLite.propTypes = { spec: PropTypes.any.isRequired, data: PropTypes.any, injectType: PropTypes.number.isRequired, + aspectRatio: PropTypes.oneOf([ + ASPECT_RATIO_1_1, + ASPECT_RATIO_3_2, + ASPECT_RATIO_4_3, + ASPECT_RATIO_8_5, + ASPECT_RATIO_16_6, + ASPECT_RATIO_16_9, + ]), }; /** diff --git a/src/app/js/formats/vega-lite/models/BubblePlot.js b/src/app/js/formats/vega-lite/models/BubblePlot.js index 05c779d0a..99ad4a42c 100644 --- a/src/app/js/formats/vega-lite/models/BubblePlot.js +++ b/src/app/js/formats/vega-lite/models/BubblePlot.js @@ -8,19 +8,15 @@ class BubblePlot extends HeatMap { this.model = deepClone(bubblePlotVL); } - /** - * @param widthIn{number | null} - */ - buildSpec(widthIn = null) { + buildSpec() { this.model.encoding.color.scale.range = this.colors; this.model.encoding.x.axis.labelAngle = -35; this.commonWithBubblePlot(); - if (!this.editMode) { - this.model.width = widthIn * 0.6; - } + this.model.width = 'container'; + this.model.height = 'container'; return this.model; } diff --git a/src/app/js/formats/vega-lite/models/Cartography.js b/src/app/js/formats/vega-lite/models/Cartography.js index 12fe40d90..f073c5ebb 100644 --- a/src/app/js/formats/vega-lite/models/Cartography.js +++ b/src/app/js/formats/vega-lite/models/Cartography.js @@ -1,11 +1,10 @@ import BasicChart from './BasicChart'; -import { - MAP_EUROPE, - MAP_FRANCE, - MAP_WORLD, - VEGA_ACTIONS_WIDTH, -} from '../../chartsUtils'; +import { MAP_EUROPE, MAP_FRANCE, MAP_WORLD } from '../../chartsUtils'; import cartographyVL from './json/cartography.vl.json'; +import worldCountriesSansAntarctica from './topojson/world-countries-sans-antarctica.json'; +import europe from './topojson/europe.json'; +import frDepartments from './topojson/fr-departments.json'; + import deepClone from 'lodash.clonedeep'; class Cartography extends BasicChart { @@ -29,9 +28,8 @@ class Cartography extends BasicChart { /** * Rebuild the edited spec - * @param widthIn{number | null} */ - buildSpec(widthIn = null) { + buildSpec() { this.model.encoding.color.scale.range = this.colors; if (this.tooltip.toggle) { @@ -62,70 +60,30 @@ class Cartography extends BasicChart { } } - if (!this.editMode) { - switch (this.worldPosition) { - case MAP_EUROPE: - if (widthIn >= 850) { - this.model.projection.scale = - 300 - 225 * (450 / widthIn); - this.model.projection.translate = [ - 350 - 30 * (450 / widthIn), - 650 - 200 * (450 / widthIn), - ]; - } else if (widthIn >= 550) { - this.model.projection.scale = - 300 - 100 * (450 / widthIn); - this.model.projection.translate = [ - 250 - 30 * (450 / widthIn), - 585 - 200 * (450 / widthIn), - ]; - } else { - this.model.projection.scale = - 280 - 140 * (450 / widthIn); - this.model.projection.translate = [ - 230 - 80 * (450 / widthIn), - 545 - 260 * (450 / widthIn), - ]; - } - break; - case MAP_FRANCE: - if (widthIn >= 850) { - this.model.projection.scale = - 1800 - 100 * (450 / widthIn); - this.model.projection.translate = [ - 400 - 30 * (450 / widthIn), - 1925 - 100 * (450 / widthIn), - ]; - } else if (widthIn >= 550) { - this.model.projection.scale = - 1200 - 80 * (450 / widthIn); - this.model.projection.translate = [ - 280 - 80 * (450 / widthIn), - 1275 - 80 * (450 / widthIn), - ]; - } else { - this.model.projection.scale = - 1200 - 480 * (450 / widthIn); - this.model.projection.translate = [ - 280 - 110 * (450 / widthIn), - 1275 - 510 * (450 / widthIn), - ]; - } - break; - } - } - switch (this.worldPosition) { + default: + this.model.data = { + values: worldCountriesSansAntarctica, + format: { type: 'topojson', feature: 'countries1' }, + }; + break; case MAP_EUROPE: - this.model.data.url = - 'https://raw.githubusercontent.com/Inist-CNRS/lodex/master/src/app/js/formats/vega-lite/models/topojson/europe.min.json'; - this.model.data.format.feature = 'continent_Europe_subunits'; + this.model.data = { + values: europe, + format: { + type: 'topojson', + feature: 'continent_Europe_subunits', + }, + }; break; case MAP_FRANCE: - this.model.data.url = - 'https://raw.githubusercontent.com/Inist-CNRS/lodex/master/src/app/js/formats/vega-lite/models/topojson/fr-departments.min.json'; - this.model.data.format.feature = 'FRA_adm2'; - + this.model.data = { + values: frDepartments, + format: { + type: 'topojson', + feature: 'FRA_adm2', + }, + }; this.model.transform.forEach(e => { if (e.lookup === 'id') { e.lookup = 'properties.HASC_2'; @@ -134,10 +92,9 @@ class Cartography extends BasicChart { break; } - if (!this.editMode) { - this.model.width = widthIn - VEGA_ACTIONS_WIDTH; - this.model.height = widthIn * 0.6; - } + this.model.width = 'container'; + this.model.height = 'container'; + this.model.autosize = this.autosize; return this.model; diff --git a/src/app/js/formats/vega-lite/models/HeatMap.js b/src/app/js/formats/vega-lite/models/HeatMap.js index f90270ade..9f06177c5 100644 --- a/src/app/js/formats/vega-lite/models/HeatMap.js +++ b/src/app/js/formats/vega-lite/models/HeatMap.js @@ -113,7 +113,7 @@ class HeatMap extends BasicChart { * Rebuild the edited spec * @param widthIn{number | null} */ - buildSpec(widthIn = null) { + buildSpec() { this.model.layer.forEach(e => { if (e.mark.type === 'rect') { e.encoding.color.scale.range = this.colors; @@ -127,10 +127,8 @@ class HeatMap extends BasicChart { this.commonWithBubblePlot(); - if (!this.editMode) { - this.model.width = this.model.height = - widthIn * (widthIn <= 920 ? 0.5 : 0.7); - } + this.model.width = 'container'; + this.model.height = 'container'; return this.model; } diff --git a/src/app/js/formats/vega-lite/models/PieChart.js b/src/app/js/formats/vega-lite/models/PieChart.js index 8b027390e..75ef24cfb 100644 --- a/src/app/js/formats/vega-lite/models/PieChart.js +++ b/src/app/js/formats/vega-lite/models/PieChart.js @@ -37,14 +37,13 @@ class PieChart extends BasicChart { this.tooltip.value, ]; - if (!this.editMode) { - this.model.width = widthIn * (widthIn <= 920 ? 0.5 : 0.7); - + if (!this.editMode && widthIn) { this.model.encoding.color.legend.legendX = widthIn * (widthIn <= 920 ? 0.5 : 0.7); } - this.model.height = 300; + this.model.width = 'container'; + this.model.height = 'container'; return this.model; } diff --git a/src/app/js/formats/vega-lite/models/json/cartography.vl.json b/src/app/js/formats/vega-lite/models/json/cartography.vl.json index 81e61f132..b6891c90b 100644 --- a/src/app/js/formats/vega-lite/models/json/cartography.vl.json +++ b/src/app/js/formats/vega-lite/models/json/cartography.vl.json @@ -1,8 +1,4 @@ { - "data": { - "url": "https://raw.githubusercontent.com/Inist-CNRS/lodex/master/src/app/js/formats/vega-lite/models/topojson/world-countries-sans-antarctica.min.json", - "format": {"type": "topojson", "feature": "countries1"} - }, "transform": [ { "lookup": "id", diff --git a/src/app/js/formats/vega-lite/models/topojson/readme.md b/src/app/js/formats/vega-lite/models/topojson/readme.md new file mode 100644 index 000000000..547e88a3a --- /dev/null +++ b/src/app/js/formats/vega-lite/models/topojson/readme.md @@ -0,0 +1,5 @@ +# WARNING / ATTENTION + +## Previous versions of LODEX use a direct link to the `master` branch via githubusercontent, which means you should avoid deleting or moving `*.min.json` files. + +## Les versions précédentes de LODEX utilisent un lien direct vers la branche `master` via githubusercontent, ce qui signifie que vous devez éviter de supprimer ou de déplacer les fichiers `*.min.json`. \ No newline at end of file From 41ae77cd01aae8b6f1ec8f831c7c126ba9fdfc5c Mon Sep 17 00:00:00 2001 From: AlasDiablo <25723276+AlasDiablo@users.noreply.github.com> Date: Mon, 4 Dec 2023 08:46:25 +0100 Subject: [PATCH 07/11] feat: add preview on cartography --- .../component/cartography/CartographyAdmin.js | 12 ++++++++++++ .../component/cartography/CartographyView.js | 12 ++++++++++++ src/app/js/formats/vega-utils/dataSet.js | 19 +++++++++++++++++++ 3 files changed, 43 insertions(+) diff --git a/src/app/js/formats/vega-lite/component/cartography/CartographyAdmin.js b/src/app/js/formats/vega-lite/component/cartography/CartographyAdmin.js index 69c46934e..28c096747 100644 --- a/src/app/js/formats/vega-lite/component/cartography/CartographyAdmin.js +++ b/src/app/js/formats/vega-lite/component/cartography/CartographyAdmin.js @@ -23,6 +23,9 @@ import { VegaChartParamsFieldSet, VegaDataParamsFieldSet, } from '../../../vega-utils/components/VegaFieldSet'; +import { MapFranceIdValue, MapIdValue } from '../../../vega-utils/dataSet'; +import VegaFieldPreview from '../../../vega-utils/components/VegaFieldPreview'; +import { CartographyAdminView } from './CartographyView'; export const defaultArgs = { params: { @@ -200,6 +203,15 @@ const CartographyAdmin = props => { )} + ); }; diff --git a/src/app/js/formats/vega-lite/component/cartography/CartographyView.js b/src/app/js/formats/vega-lite/component/cartography/CartographyView.js index 2f6897538..3f702ccbe 100644 --- a/src/app/js/formats/vega-lite/component/cartography/CartographyView.js +++ b/src/app/js/formats/vega-lite/component/cartography/CartographyView.js @@ -123,4 +123,16 @@ const mapStateToProps = (state, { formatData }) => { }; }; +export const CartographyAdminView = connect((state, props) => { + return { + ...props, + field: { + format: 'Preview Format', + }, + data: { + values: props.dataset.values ?? [], + }, + }; +})(CartographyView); + export default compose(injectData(), connect(mapStateToProps))(CartographyView); diff --git a/src/app/js/formats/vega-utils/dataSet.js b/src/app/js/formats/vega-utils/dataSet.js index 2059c66bc..2c5b547b5 100644 --- a/src/app/js/formats/vega-utils/dataSet.js +++ b/src/app/js/formats/vega-utils/dataSet.js @@ -31,3 +31,22 @@ export const MapSourceTargetWeight = { { source: 'FRA', target: 'TUN', weight: 15 }, ], }; + +export const MapIdValue = { + name: 'Map - _id / value', + values: [ + { _id: 'JPN', value: 28 }, + { _id: 'GBR', value: 55 }, + { _id: 'CAN', value: 43 }, + { _id: 'TUN', value: 15 }, + ], +}; + +export const MapFranceIdValue = { + name: 'Map France - _id / value', + values: [ + { _id: 'FR.VG', value: 28 }, + { _id: 'FR.MM', value: 55 }, + { _id: 'FR.HM', value: 15 }, + ], +}; From b6cfbf62f3d9b11f43effc311f14646ba48824d0 Mon Sep 17 00:00:00 2001 From: AlasDiablo <25723276+AlasDiablo@users.noreply.github.com> Date: Mon, 4 Dec 2023 08:54:29 +0100 Subject: [PATCH 08/11] feat:add preview for vega-lite syntax --- src/app/js/formats/vega-lite/VegaLiteAdmin.js | 19 ++++++++++++++----- src/app/js/formats/vega-lite/VegaLiteView.js | 12 ++++++++++++ .../vega-utils/components/VegaFieldPreview.js | 12 ++---------- src/app/js/formats/vega-utils/dataSet.js | 8 ++++++++ 4 files changed, 36 insertions(+), 15 deletions(-) diff --git a/src/app/js/formats/vega-lite/VegaLiteAdmin.js b/src/app/js/formats/vega-lite/VegaLiteAdmin.js index 657a9f697..cd2edd65c 100644 --- a/src/app/js/formats/vega-lite/VegaLiteAdmin.js +++ b/src/app/js/formats/vega-lite/VegaLiteAdmin.js @@ -7,7 +7,12 @@ import { polyglot as polyglotPropTypes } from '../../propTypes'; import updateAdminArgs from '../shared/updateAdminArgs'; import RoutineParamsAdmin from '../shared/RoutineParamsAdmin'; import VegaAdvancedMode from '../vega-utils/components/VegaAdvancedMode'; -import VegaFieldSet from '../vega-utils/components/VegaFieldSet'; +import { + VegaChartParamsFieldSet, + VegaDataParamsFieldSet, +} from '../vega-utils/components/VegaFieldSet'; +import VegaFieldPreview from '../vega-utils/components/VegaFieldPreview'; +import { VegaLiteAdminView } from './VegaLiteView'; export const defaultArgs = { params: { @@ -62,7 +67,7 @@ const VegaLiteAdmin = props => { justifyContent="space-between" gap={2} > - + { showMinValue={showMinValue} showOrderBy={showOrderBy} /> - - + + { endAdornment: '%', }} /> - + + ); }; diff --git a/src/app/js/formats/vega-lite/VegaLiteView.js b/src/app/js/formats/vega-lite/VegaLiteView.js index a3d24ca32..030927ec1 100644 --- a/src/app/js/formats/vega-lite/VegaLiteView.js +++ b/src/app/js/formats/vega-lite/VegaLiteView.js @@ -75,4 +75,16 @@ const mapStateToProps = (state, { formatData }) => { }; }; +export const VegaLiteAdminView = connect((state, props) => { + return { + ...props, + field: { + format: 'Preview Format', + }, + data: { + values: props.dataset.values ?? [], + }, + }; +})(VegaLiteView); + export default compose(injectData(), connect(mapStateToProps))(VegaLiteView); diff --git a/src/app/js/formats/vega-utils/components/VegaFieldPreview.js b/src/app/js/formats/vega-utils/components/VegaFieldPreview.js index e17833f6c..ac0c56d5d 100644 --- a/src/app/js/formats/vega-utils/components/VegaFieldPreview.js +++ b/src/app/js/formats/vega-utils/components/VegaFieldPreview.js @@ -4,11 +4,7 @@ import translate from 'redux-polyglot/translate'; import { vegaAdminStyle } from '../adminStyles'; import { polyglot as polyglotPropTypes } from '../../../propTypes'; import { MenuItem, Select } from '@mui/material'; -import { - MapSourceTargetWeight, - StandardIdValue, - StandardSourceTargetWeight, -} from '../dataSet'; +import { AllDataSets } from '../dataSet'; const VegaFieldPreview = ({ p, @@ -80,11 +76,7 @@ const VegaFieldPreview = ({ VegaFieldPreview.defaultProps = { showDatasetsSelector: true, - datasets: [ - StandardIdValue, - StandardSourceTargetWeight, - MapSourceTargetWeight, - ], + datasets: AllDataSets, }; VegaFieldPreview.propTypes = { diff --git a/src/app/js/formats/vega-utils/dataSet.js b/src/app/js/formats/vega-utils/dataSet.js index 2c5b547b5..f31a1afb2 100644 --- a/src/app/js/formats/vega-utils/dataSet.js +++ b/src/app/js/formats/vega-utils/dataSet.js @@ -50,3 +50,11 @@ export const MapFranceIdValue = { { _id: 'FR.HM', value: 15 }, ], }; + +export const AllDataSets = [ + StandardIdValue, + StandardSourceTargetWeight, + MapSourceTargetWeight, + MapIdValue, + MapFranceIdValue, +]; From a86dbd37005818e10d5e52a213907c09d2d952d8 Mon Sep 17 00:00:00 2001 From: AlasDiablo <25723276+AlasDiablo@users.noreply.github.com> Date: Mon, 4 Dec 2023 09:16:50 +0100 Subject: [PATCH 09/11] fix: update test unit to handle new responsive system --- src/app/js/formats/vega-lite/models/HeatMap.spec.js | 4 ++-- src/app/js/formats/vega-lite/models/PieChart.spec.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/app/js/formats/vega-lite/models/HeatMap.spec.js b/src/app/js/formats/vega-lite/models/HeatMap.spec.js index c4bf1217d..a8acffbee 100644 --- a/src/app/js/formats/vega-lite/models/HeatMap.spec.js +++ b/src/app/js/formats/vega-lite/models/HeatMap.spec.js @@ -118,7 +118,6 @@ describe('HeatMap', () => { type: 'nominal', }, }, - height: 200, layer: [ { encoding: { @@ -199,7 +198,8 @@ describe('HeatMap', () => { ], }, ], - width: 200, + width: 'container', + height: 'container', }); }); }); diff --git a/src/app/js/formats/vega-lite/models/PieChart.spec.js b/src/app/js/formats/vega-lite/models/PieChart.spec.js index 432203b3c..f7639e70f 100644 --- a/src/app/js/formats/vega-lite/models/PieChart.spec.js +++ b/src/app/js/formats/vega-lite/models/PieChart.spec.js @@ -44,7 +44,6 @@ describe('PieChart', () => { type: 'quantitative', }, }, - height: 300, layer: [ { mark: { @@ -71,7 +70,8 @@ describe('PieChart', () => { view: { stroke: null, }, - width: 200, + width: 'container', + height: 'container', }); }); }); From 7c374244e44e26b304552e2d29c4f9fe9a5c5e08 Mon Sep 17 00:00:00 2001 From: AlasDiablo <25723276+AlasDiablo@users.noreply.github.com> Date: Thu, 7 Dec 2023 13:14:15 +0100 Subject: [PATCH 10/11] fix: add correct data and remove url call on vega spec --- src/app/js/formats/vega-utils/dataSet.js | 12 ++++++++++++ .../vega/component/flow-map/FlowMapAdmin.js | 2 +- .../formats/vega/component/flow-map/FlowMapView.js | 3 +-- src/app/js/formats/vega/models/FlowMap.js | 14 +++++++++++++- .../js/formats/vega/models/json/flow_map.vg.json | 4 ++-- 5 files changed, 29 insertions(+), 6 deletions(-) diff --git a/src/app/js/formats/vega-utils/dataSet.js b/src/app/js/formats/vega-utils/dataSet.js index f31a1afb2..d71eb4b18 100644 --- a/src/app/js/formats/vega-utils/dataSet.js +++ b/src/app/js/formats/vega-utils/dataSet.js @@ -25,10 +25,22 @@ export const StandardSourceTargetWeight = { export const MapSourceTargetWeight = { name: 'Map - source / target / weight', values: [ + // Points + { source: 'FRA', target: 'FRA', weight: 18 }, + { source: 'JPN', target: 'JPN', weight: 28 }, + { source: 'GBR', target: 'GBR', weight: 55 }, + { source: 'CAN', target: 'CAN', weight: 43 }, + { source: 'TUN', target: 'TUN', weight: 15 }, + // Link right to left { source: 'FRA', target: 'JPN', weight: 28 }, { source: 'FRA', target: 'GBR', weight: 55 }, { source: 'FRA', target: 'CAN', weight: 43 }, { source: 'FRA', target: 'TUN', weight: 15 }, + // Link left to right + { source: 'JPN', target: 'FRA', weight: 28 }, + { source: 'GBR', target: 'FRA', weight: 55 }, + { source: 'CAN', target: 'FRA', weight: 43 }, + { source: 'TUN', target: 'FRA', weight: 15 }, ], }; diff --git a/src/app/js/formats/vega/component/flow-map/FlowMapAdmin.js b/src/app/js/formats/vega/component/flow-map/FlowMapAdmin.js index 938bfd22b..ba9a520b7 100644 --- a/src/app/js/formats/vega/component/flow-map/FlowMapAdmin.js +++ b/src/app/js/formats/vega/component/flow-map/FlowMapAdmin.js @@ -13,7 +13,7 @@ import FlowMap from '../../models/FlowMap'; import VegaAdvancedMode from '../../../vega-utils/components/VegaAdvancedMode'; import VegaFieldPreview from '../../../vega-utils/components/VegaFieldPreview'; import { FlowMapAdminView } from './FlowMapView'; -import VegaFieldSet, { +import { VegaChartParamsFieldSet, VegaDataParamsFieldSet, } from '../../../vega-utils/components/VegaFieldSet'; diff --git a/src/app/js/formats/vega/component/flow-map/FlowMapView.js b/src/app/js/formats/vega/component/flow-map/FlowMapView.js index a8a198a14..fe544dae6 100644 --- a/src/app/js/formats/vega/component/flow-map/FlowMapView.js +++ b/src/app/js/formats/vega/component/flow-map/FlowMapView.js @@ -68,7 +68,7 @@ const FlowMapView = ({ return specBuilder.buildSpec(width, data.values.length); }, [ width, - data.values, + data.values.length, advancedMode, advancedModeSpec, tooltip, @@ -96,7 +96,6 @@ const FlowMapView = ({ FlowMapView.propTypes = { field: fieldPropTypes.isRequired, - resource: PropTypes.object.isRequired, data: PropTypes.any, tooltip: PropTypes.bool.isRequired, tooltipCategory: PropTypes.string.isRequired, diff --git a/src/app/js/formats/vega/models/FlowMap.js b/src/app/js/formats/vega/models/FlowMap.js index 6e0c6188a..b190311ad 100644 --- a/src/app/js/formats/vega/models/FlowMap.js +++ b/src/app/js/formats/vega/models/FlowMap.js @@ -3,6 +3,8 @@ import flowMapVG from './json/flow_map.vg.json'; import deepClone from 'lodash.clonedeep'; import BasicChartVG from './BasicChartVG'; import { VEGA_ACTIONS_WIDTH } from '../../chartsUtils'; +import worldCountriesSansAntarctica from '../../vega-lite/models/topojson/world-countries-sans-antarctica.json'; +import countriesCoordinate from './json/countriesCoordinate.json'; class FlowMap extends BasicChartVG { /** @@ -85,7 +87,7 @@ class FlowMap extends BasicChartVG { } }); - if (this.tooltip.toggle) + if (this.tooltip.toggle) { this.model.marks.forEach(e => { if (e.name === 'cell') { e.encode.enter.tooltip = { @@ -93,6 +95,16 @@ class FlowMap extends BasicChartVG { }; } }); + } + + this.model.data.forEach(e => { + if (e.name === 'geo_data') { + e.values = worldCountriesSansAntarctica; + } + if (e.name === 'node_data') { + e.values = countriesCoordinate; + } + }); return this.model; } diff --git a/src/app/js/formats/vega/models/json/flow_map.vg.json b/src/app/js/formats/vega/models/json/flow_map.vg.json index c4d673726..75e52910e 100644 --- a/src/app/js/formats/vega/models/json/flow_map.vg.json +++ b/src/app/js/formats/vega/models/json/flow_map.vg.json @@ -148,7 +148,7 @@ "data": [ { "name": "geo_data", - "url": "https://raw.githubusercontent.com/Inist-CNRS/lodex/master/src/app/js/formats/vega-lite/models/topojson/world-countries-sans-antarctica.min.json", + "values": [], "format": { "type": "topojson", "feature": "countries1" @@ -175,7 +175,7 @@ }, { "name": "node_data", - "url": "https://raw.githubusercontent.com/Inist-CNRS/lodex/master/src/app/js/formats/vega/models/json/countriesCoordinate.min.json", + "values": [], "format": { "type": "json", "property": "values" From 3ffade6fc85498e271947414622feeb279a1a2df Mon Sep 17 00:00:00 2001 From: AlasDiablo <25723276+AlasDiablo@users.noreply.github.com> Date: Fri, 8 Dec 2023 08:23:17 +0100 Subject: [PATCH 11/11] feat: add fields set to clustered chart --- .../clustered-chart/ClusteredChartAdmin.js | 37 ++++++++++--------- 1 file changed, 20 insertions(+), 17 deletions(-) diff --git a/src/app/js/formats/vega-lite/component/clustered-chart/ClusteredChartAdmin.js b/src/app/js/formats/vega-lite/component/clustered-chart/ClusteredChartAdmin.js index 5620f25c3..6baaf60b6 100644 --- a/src/app/js/formats/vega-lite/component/clustered-chart/ClusteredChartAdmin.js +++ b/src/app/js/formats/vega-lite/component/clustered-chart/ClusteredChartAdmin.js @@ -7,6 +7,7 @@ import { polyglot as polyglotPropTypes } from '../../../../propTypes'; import ColorPickerParamsAdmin from '../../../shared/ColorPickerParamsAdmin'; import { MONOCHROMATIC_DEFAULT_COLORSET } from '../../../colorUtils'; import updateAdminArgs from '../../../shared/updateAdminArgs'; +import { VegaChartParamsFieldSet } from '../../../vega-utils/components/VegaFieldSet'; export const defaultArgs = { colors: MONOCHROMATIC_DEFAULT_COLORSET, @@ -35,23 +36,25 @@ const ClusteredChartAdmin = props => { justifyContent="space-between" gap={2} > - - - + + + + + ); };