0.0.0 β’ Published 9 months ago
charts-temp v0.0.0
Prism Charts
Prism's react component library of charts
Vega-lite
All of our charts are built with vega-lite, an open source charting library that provides a declarative JSON syntax for creating many different visuals and visual interactions.
What's in here
All of the chart code lives in the src/features/charts
directory. Here is a general overview of the file structure:
π¦ src/features/charts
β£ π
β£ β π [chartType]
β£ β β£ π constants.ts // lists possible encodings and features for the given chart
β£ β β£ π [chartType].tsx // method for generating spec & react component for the given chart type
β£ β β π types.ts // type specific to the chart type
β£ π construction (name to change)
β£ β£ π chart-features
β β β π [feature-name].ts // methods for generating vl code for given feature
β£ β£ π encoding
β β β π [encoding-channel-name].ts // methods for generating vl encoding for given channel
β£ β£ π mark
β β β π mark.ts // method for generating vl mark
β£ β£ π top-level-props
β β β π top-level-props.ts // method for generating vl top level configuration
β£ β π types //
β£ β π constants.ts // maps feature and encoding names to their construction methods
β£ β π utils.ts // methods for putting the different features and encodings together
β£ π base-chart.tsx // wrapper for all charts
β£ π types.ts // types used across components
β π utils.ts // misc util methods for charts
Notes
- Components
- Each chart type will have its own folder in charts/components. Each component file has a method for generating the spec and a separate react component for the chart. This gives us some flexibility if we want to use just the spec and not the component in other systems
- Construction (finding a better name for this)
- This directory is responsible for building the vega lite spec.
- Vl-specs consist mainly of encodings, marks, parameters, and data. We can put these pieces together and layer them on top of each other to make more complex charts
- Encodings
- Charts have required and optional encodings. For example, for a scatter plot to really be a scatter plot, it needs an x and y axis, so x and y are required encodings. A scatter plot can also have color, shape, and size features. These are optional encodings. We define these in the chart component constants.
- Features
- Different charts can also have different features. For example, a scatter plot can support trend lines, whereas they donβt make sense on a pie chart. We define the list of optional features in the chart component constants.
- To put together all the pieces of a chart, we define what the optional encodings and optional features are for a given chart. The method
finalizeSpec
is responsible for going through the provided chart props and adding the correct encodings and features.
Running locally
yarn install
yarn dev
0.0.0
9 months ago