# charts-temp

> Prism's react component library of charts

Latest version **0.0.0** (published 2023-08-09) · 0 weekly downloads

## Install

```sh
npm install charts-temp
pnpm add charts-temp
yarn add charts-temp
bun add charts-temp
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.0 |
| Published | 2023-08-09 |
| First published | 2023-08-09 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 14 |
| Unpacked size | 293 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | kgarrity22 |

## Links

- npm: https://www.npmjs.com/package/charts-temp
- npm.io page: https://npm.io/package/charts-temp

## Dependencies (14)

- [path](https://npm.io/package/path.md) ^0.12.7
- [vega](https://npm.io/package/vega.md) ^5.25.0
- [react](https://npm.io/package/react.md) ^18.2.0
- [lodash](https://npm.io/package/lodash.md) ^4.17.21
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [vega-lite](https://npm.io/package/vega-lite.md) ^5.14.1
- [react-vega](https://npm.io/package/react-vega.md) ^7.6.0
- [@mui/material](https://npm.io/package/@mui/material.md) ^5.14.3
- [@types/lodash](https://npm.io/package/@types/lodash.md) ^4.14.196
- [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.11.1
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11.11.0
- [react-router-dom](https://npm.io/package/react-router-dom.md) ^6.14.1
- [vite-plugin-webfont-dl](https://npm.io/package/vite-plugin-webfont-dl.md) ^3.7.6
- [@vitejs/plugin-react-swc](https://npm.io/package/@vitejs/plugin-react-swc.md) ^3.3.2

## Recent versions

- 0.0.0 (latest) — 2023-08-09

## README

# Prism Charts

Prism's react component library of charts

## Vega-lite

All of our charts are built with [vega-lite](https://vega.github.io/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

```bash
yarn install
yarn dev
```

---
_Source: https://npm.io/package/charts-temp · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._