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 ? (
-
+
- ) : (
- <>
-
-
-
-
-
-
-
- }
- 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 ? (
+
-
-
-
-
-
- >
- )}
+ ) : (
+ <>
+
+
+
+
+
+
+
+ }
+ 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')}
+ />
+
+
+
+
+
+ >
+ )}
+
+
);
};
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 ? (
-
+
- ) : (
- <>
-
-
-
-
-
-
+
+
+
+ }
+ label={polyglot.t('advancedMode')}
/>
-
+ {advancedMode ? (
+
- >
- )}
+ ) : (
+ <>
+
+
+
+
+
+
+
+ >
+ )}
+
);
};
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 (
+
+ );
+};
+
+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 (
+
+ );
+};
+
+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')}
- />
-
-
-
-
- >
- )}
+ ) : (
+ <>
+
+
+
+ }
+ label={polyglot.t('axis_round_value')}
+ />
+
+
+
+
+ >
+ )}
+
+
);
};
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}
/>
-
-
+
+
{
>
)}
-
+
);
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 (
);
};
+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 (
-
+
{
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}
>
-
-
-
+
+
+
+
+
);
};