diff --git a/src/app/custom/translations.tsv b/src/app/custom/translations.tsv index 55cdd5463..7ada99731 100644 --- a/src/app/custom/translations.tsv +++ b/src/app/custom/translations.tsv @@ -1029,4 +1029,7 @@ format_x_axis_title Title of x axis Titre de l'axe x format_y_axis_title Title of y axis Titre de l'axe y "formatJsonDebug" "Other - Json and Debug Format" "Autre - Format Json et Débogage" "formatJsonDebugDescription" "This format allow to display simple json value or debug values as json" "Ce format permet d'afficher des valeurs json simples ou des valeurs de débogage sous forme de json." -"debugMode" "Enable debugging" "Activer le débogage" \ No newline at end of file +"debugMode" "Enable debugging" "Activer le débogage" +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/VegaLiteAdmin.js b/src/app/js/formats/vega-lite/VegaLiteAdmin.js index e7e317a0a..cd2edd65c 100644 --- a/src/app/js/formats/vega-lite/VegaLiteAdmin.js +++ b/src/app/js/formats/vega-lite/VegaLiteAdmin.js @@ -6,7 +6,13 @@ 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'; +import { + VegaChartParamsFieldSet, + VegaDataParamsFieldSet, +} from '../vega-utils/components/VegaFieldSet'; +import VegaFieldPreview from '../vega-utils/components/VegaFieldPreview'; +import { VegaLiteAdminView } from './VegaLiteView'; export const defaultArgs = { params: { @@ -61,53 +67,61 @@ 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-lite/VegaLiteView.js b/src/app/js/formats/vega-lite/VegaLiteView.js index 79ded499e..db2a0b2e9 100644 --- a/src/app/js/formats/vega-lite/VegaLiteView.js +++ b/src/app/js/formats/vega-lite/VegaLiteView.js @@ -13,7 +13,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: { @@ -77,4 +77,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-lite/component/bar-chart/BarChartAdmin.js b/src/app/js/formats/vega-lite/component/bar-chart/BarChartAdmin.js index 7f8f81990..34a239e35 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,14 @@ import { lodexDirectionToIdDirection, lodexScaleToIdScale, } from '../../../chartsUtils'; -import VegaAdvancedMode from '../../../shared/VegaAdvancedMode'; +import VegaAdvancedMode from '../../../vega-utils/components/VegaAdvancedMode'; +import { BarChartAdminView } from './BarChartView'; +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: { @@ -161,11 +168,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 +194,138 @@ 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('advancedMode')} /> - - } - label={polyglot.t('axis_round_value')} + + {advancedMode ? ( + - - } - label={polyglot.t('toggle_labels')} - /> - - } - label={polyglot.t('toggle_label_overlap')} - /> - - - {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 ccbb46694..708157dc8 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 @@ -18,7 +18,8 @@ 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'; +import { ASPECT_RATIO_16_6 } from '../../../aspectRatio'; const styles = { container: { @@ -111,29 +112,32 @@ const BarChartView = ({ spec={spec} data={data} injectType={VEGA_LITE_DATA_INJECT_TYPE_A} + aspectRatio={ASPECT_RATIO_16_6} /> ); }; 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, }; @@ -157,4 +161,16 @@ const mapStateToProps = (state, { formatData }) => { }; }; +export const BarChartAdminView = connect((state, props) => { + return { + ...props, + field: { + format: 'Preview Format', + }, + data: { + values: props.dataset.values ?? [], + }, + }; +})(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..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 @@ -12,12 +12,19 @@ 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 { + 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: { @@ -136,62 +143,72 @@ 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 e5ed34cd6..eb7383c2d 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 @@ -15,7 +15,8 @@ import { } from '../../../chartsUtils'; import BubblePlot from '../../models/BubblePlot'; import InvalidFormat from '../../../InvalidFormat'; -import { useSizeObserver } from '../../../chartsHooks'; +import { useSizeObserver } from '../../../vega-utils/chartsHooks'; +import { ASPECT_RATIO_1_1 } from '../../../aspectRatio'; const styles = { container: { @@ -88,22 +89,25 @@ const BubblePlotView = ({ spec={spec} data={data} injectType={VEGA_LITE_DATA_INJECT_TYPE_A} + aspectRatio={ASPECT_RATIO_1_1} /> ); }; 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, }; @@ -123,4 +127,16 @@ const mapStateToProps = (state, { formatData }) => { }; }; +export const BubblePlotAdminView = connect((state, props) => { + return { + ...props, + field: { + format: 'Preview Format', + }, + data: { + values: props.dataset.values ?? [], + }, + }; +})(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..28c096747 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,17 @@ 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 { + 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: { @@ -130,68 +137,81 @@ 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 a86ad30f4..32418b45c 100644 --- a/src/app/js/formats/vega-lite/component/cartography/CartographyView.js +++ b/src/app/js/formats/vega-lite/component/cartography/CartographyView.js @@ -17,7 +17,7 @@ import { field as fieldPropTypes } from '../../../../propTypes'; import injectData from '../../../injectData'; import Cartography from '../../models/Cartography'; import InvalidFormat from '../../../InvalidFormat'; -import { useSizeObserver } from '../../../chartsHooks'; +import { useSizeObserver } from '../../../vega-utils/chartsHooks'; const styles = { container: { @@ -96,14 +96,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, }; @@ -123,4 +125,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-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} > - - - + + + + + ); }; 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..6de4ed480 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,17 @@ 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 { + VegaChartParamsFieldSet, + VegaDataParamsFieldSet, +} from '../../../vega-utils/components/VegaFieldSet'; +import VegaFieldPreview from '../../../vega-utils/components/VegaFieldPreview'; +import { StandardSourceTargetWeight } from '../../../vega-utils/dataSet'; export const defaultArgs = { params: { @@ -138,62 +145,72 @@ 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 84736b1e9..f667a9349 100644 --- a/src/app/js/formats/vega-lite/component/heatmap/HeatMapView.js +++ b/src/app/js/formats/vega-lite/component/heatmap/HeatMapView.js @@ -13,9 +13,10 @@ import { VEGA_LITE_DATA_INJECT_TYPE_A, } from '../../../chartsUtils'; import InvalidFormat from '../../../InvalidFormat'; -import { useSizeObserver } from '../../../chartsHooks'; +import { useSizeObserver } from '../../../vega-utils/chartsHooks'; import { CustomActionVegaLite } from '../vega-lite-component'; import injectData from '../../../injectData'; +import { ASPECT_RATIO_1_1 } from '../../../aspectRatio'; const styles = { container: { @@ -88,22 +89,25 @@ const HeatMapView = ({ spec={spec} data={data} injectType={VEGA_LITE_DATA_INJECT_TYPE_A} + aspectRatio={ASPECT_RATIO_1_1} /> ); }; 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, }; @@ -123,4 +127,16 @@ const mapStateToProps = (state, { formatData }) => { }; }; +export const HeatMapAdminView = connect((state, props) => { + return { + ...props, + field: { + format: 'Preview Format', + }, + data: { + values: props.dataset.values ?? [], + }, + }; +})(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..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 @@ -14,9 +14,16 @@ 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 { + 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: { @@ -126,60 +133,70 @@ 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 7f5d2de4f..ac0351fee 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,9 +12,10 @@ import { VEGA_LITE_DATA_INJECT_TYPE_A, } from '../../../chartsUtils'; import InvalidFormat from '../../../InvalidFormat'; -import { useSizeObserver } from '../../../chartsHooks'; +import { useSizeObserver } from '../../../vega-utils/chartsHooks'; import { field as fieldPropTypes } from '../../../../propTypes'; import injectData from '../../../injectData'; +import { ASPECT_RATIO_8_5 } from '../../../aspectRatio'; const styles = { container: { @@ -87,20 +88,23 @@ const PieChartView = ({ spec={spec} data={data} injectType={VEGA_LITE_DATA_INJECT_TYPE_A} + aspectRatio={ASPECT_RATIO_8_5} /> ); }; 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, }; @@ -124,4 +128,16 @@ const mapStateToProps = (state, { formatData }) => { }; }; +export const PieChartAdminView = connect((state, props) => { + return { + ...props, + field: { + format: 'Preview Format', + }, + data: { + values: props.dataset.values ?? [], + }, + }; +})(PieChartView); + export default compose(injectData(), connect(mapStateToProps))(PieChartView); 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/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.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/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', }); }); }); 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 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..ac0c56d5d --- /dev/null +++ b/src/app/js/formats/vega-utils/components/VegaFieldPreview.js @@ -0,0 +1,95 @@ +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 { AllDataSets } from '../dataSet'; + +const VegaFieldPreview = ({ + p, + args, + showDatasetsSelector, + datasets, + PreviewComponent, +}) => { + 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); + }; + + const handleDataSetEditor = event => { + setDataset(event.updated_src); + }; + + return ( +
+ + {p.t('format_preview')} + + {showDatasetsSelector ? ( + + ) : null} +
+ +
+ +
+ ); +}; + +VegaFieldPreview.defaultProps = { + showDatasetsSelector: true, + datasets: AllDataSets, +}; + +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, +}; + +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..42ebcc976 --- /dev/null +++ b/src/app/js/formats/vega-utils/components/VegaFieldSet.js @@ -0,0 +1,55 @@ +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, p }) => { + return ( +
+ {p.t(title)} + + {children} + +
+ ); +}; + +VegaFieldSet.propTypes = { + children: PropTypes.node.isRequired, + title: PropTypes.string.isRequired, + p: polyglotPropTypes.isRequired, +}; + +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/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-utils/dataSet.js b/src/app/js/formats/vega-utils/dataSet.js new file mode 100644 index 000000000..d71eb4b18 --- /dev/null +++ b/src/app/js/formats/vega-utils/dataSet.js @@ -0,0 +1,72 @@ +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: [ + // 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 }, + ], +}; + +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 }, + ], +}; + +export const AllDataSets = [ + StandardIdValue, + StandardSourceTargetWeight, + MapSourceTargetWeight, + MapIdValue, + MapFranceIdValue, +]; 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..ba9a520b7 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,20 @@ 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'; +import VegaFieldPreview from '../../../vega-utils/components/VegaFieldPreview'; +import { FlowMapAdminView } from './FlowMapView'; +import { + VegaChartParamsFieldSet, + VegaDataParamsFieldSet, +} from '../../../vega-utils/components/VegaFieldSet'; +import { MapSourceTargetWeight } from '../../../vega-utils/dataSet'; export const defaultArgs = { params: { @@ -131,57 +138,67 @@ 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 702debea3..38f666f84 100644 --- a/src/app/js/formats/vega/component/flow-map/FlowMapView.js +++ b/src/app/js/formats/vega/component/flow-map/FlowMapView.js @@ -18,7 +18,7 @@ import { import { schemeBlues } from 'd3-scale-chromatic'; import MouseIcon from '../../../shared/MouseIcon'; import InvalidFormat from '../../../InvalidFormat'; -import { useSizeObserver } from '../../../chartsHooks'; +import { useSizeObserver } from '../../../vega-utils/chartsHooks'; import injectData from '../../../injectData'; const styles = { @@ -70,7 +70,7 @@ const FlowMapView = ({ return specBuilder.buildSpec(width, data.values.length); }, [ width, - data.values, + data.values.length, advancedMode, advancedModeSpec, tooltip, @@ -98,7 +98,6 @@ const FlowMapView = ({ FlowMapView.propTypes = { field: fieldPropTypes.isRequired, - resource: PropTypes.object.isRequired, data: PropTypes.any, tooltip: PropTypes.bool.isRequired, tooltipCategory: PropTypes.string.isRequired, @@ -129,4 +128,16 @@ const mapStateToProps = (state, { formatData }) => { }; }; +export const FlowMapAdminView = connect((state, props) => { + return { + ...props, + field: { + format: 'Preview Format', + }, + data: { + values: props.dataset.values ?? [], + }, + }; +})(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 f33f01873..693a708d7 100644 --- a/src/app/js/formats/vega/component/radar-chart/RadarChartAdmin.js +++ b/src/app/js/formats/vega/component/radar-chart/RadarChartAdmin.js @@ -16,10 +16,17 @@ import updateAdminArgs from '../../../shared/updateAdminArgs'; import RoutineParamsAdmin from '../../../shared/RoutineParamsAdmin'; import ColorPickerParamsAdmin from '../../../shared/ColorPickerParamsAdmin'; import { MONOCHROMATIC_DEFAULT_COLORSET } from '../../../colorUtils'; -import ToolTips from '../../../shared/ToolTips'; -import VegaAdvancedMode from '../../../shared/VegaAdvancedMode'; +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, { + 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: { @@ -142,73 +149,83 @@ const RadarChartAdmin = props => { justifyContent="space-between" gap={2} > - - - } - label={polyglot.t('advancedMode')} - /> - - - {advancedMode ? ( - + - ) : ( - <> - - + + + } - label={polyglot.t('axis_round_value')} + label={polyglot.t('advancedMode')} /> - - - {polyglot.t('linear')} - - {polyglot.t('log')} - - - )} + + {advancedMode ? ( + + ) : ( + <> + + + + } + 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 0b03be7c7..9ba01a59c 100644 --- a/src/app/js/formats/vega/component/radar-chart/RadarChartView.js +++ b/src/app/js/formats/vega/component/radar-chart/RadarChartView.js @@ -13,7 +13,7 @@ import { VEGA_DATA_INJECT_TYPE_A, } from '../../../chartsUtils'; import InvalidFormat from '../../../InvalidFormat'; -import { useSizeObserver } from '../../../chartsHooks'; +import { useSizeObserver } from '../../../vega-utils/chartsHooks'; import { field as fieldPropTypes } from '../../../../propTypes'; import injectData from '../../../injectData'; @@ -136,4 +136,16 @@ const mapStateToProps = (state, { formatData }) => { }; }; +export const RadarChartAdminView = connect((state, props) => { + return { + ...props, + field: { + format: 'Preview Format', + }, + data: { + values: props.dataset.values ?? [], + }, + }; +})(RadarChartView); + export default compose(injectData(), connect(mapStateToProps))(RadarChartView); 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"