-
Notifications
You must be signed in to change notification settings - Fork 14
Adding a new graphic
You can add new formats to LODEX via Vega-Lite or Vega
Before adding a new graphic you need to know how to add a new format
- Formats folder:
src/app/js/formats/vega-lite/component
- Models builder folder:
src/app/js/formats/vega-lite/models
- Models json folder:
src/app/js/formats/vega-lite/models/json
Definition:
- Formats are just a format
- Models builder are a javascript class that dynamically edit json Models
- Models json are json file with the vega-lite spefication write into
Before create the models builder you need to create a Vega-Lite specification with Vega-Lite Editor, after creating specification add it into the Models json folder
with .vl.json
for the file extension.
When specification is created, a builder must be constructed into the Models builder folder
. This builder needs to extended the BasicChart.js
.
You need also to import you json into your builder with using require
.
note: buildSpec
comes from BasicChart
. widthIn
is the size of the html container
import BasicChart from './BasicChart';
class MyChart extends BasicChart {
construtor() {
super();
this.model = require('./json/mychart.vl.json');
}
myFunction(parametter) {
/*
beautiful code here
*/
}
buildSpec(widthIn) {
/*
beautiful code here
*/
return this.model;
}
}
When you have your builder, a new format needs to be create in the corresponding folder.
With vega lite's builder, the view needs to be handle with a specific code (only in render
and mapStateToProps
).
The mapStateToProps
needs to reorganized the data before being used by Vega-Lite.
const mapStateToProps = (state, { formatData }) => {
// return an empty object if formatData is undefined (this can be change if you need to edit data)
if (!formatData) {
return {};
}
// return the data with a normalized data format
return {
data: {
values: formatData,
},
};
};
When you start the render of your graphic you need to create a new instance of your builder but this instance needs to be instantly deepClone
to avoid the duplication of graph specification.
const myChart = deepClone(new MyChart());
For the return you need to use ContainerDimensions
for building the graphic in the return statement.
render() {
// Get the data from mapStateToProps
const data = this.props.data;
// Create a new MyChart instance
const myChart = deepClone(new MyChart());
// Set all MyChart parameters chosed by the administrator
myChart.myFunction(this.props.parametter);
return (
<div style={styles.container}>
<ContainerDimensions>
{/* Make the chart responsive */}
{({ width }) => {
const spec = myChart.buildSpec(width);
return (
<CustomActionVegaLite
spec={spec}
data={data}
injectType={VEGA_LITE_DATA_INJECT_TYPE_A}
/>
);
}}
</ContainerDimensions>
</div>
);
}
Note on injectType
:
Most of the time you need to use VEGA_LITE_DATA_INJECT_TYPE_A
for the injection type, because it's using the normalized data injection but in some case it can't be use. If that case is encountered you must do create a new INJECT_TYPE
. Inside of CustomActionVegaLite
you add your new data injection type within the existing code.
For Vega is the same step like preceding but parts of it are different:
- Formats folder:
src/app/js/formats/vega/component
- Models builder folder:
src/app/js/formats/vega/models
- Models json folder:
src/app/js/formats/vega/models/json
- Vega Editor
-
BasicChart.js
do not exist for the Vega version but normally you can extended it - Instead of
CustomActionVegaLite
useCustomActionVega
- Instead of
vl.json
usevg.json
-
-
ToolTips.js
provide an eays way to manage custom tool tip in your code- This class provide support for tooltip with 2 or 3 field
- Exemple: PieChartAdmin.js
-
-
-
chartUtils.js
is a directory that contains a lot of useful constants/functions to standardize the code. - List of useful constants/functions
-
lodexScaleToIdScale
: Convert the scale notation of lodex into an ID -
lodexOrderToIdOrder
: Convert the value order notation of lodex into an ID -
VALUES_ASC
: ID for an order by value with an ascending direction - And more...
-
- Exemple: BarChartView.js
-