chartext's Introduction

chartext

React Skia Chart

🚧 Currently under development 🚧

Demo

Packages

Package	Description	Defaults
@chartext/canvaskit	React canvaskit library
@chartext/chart	React canvaskit chart	ChartDefaults

Examples

Example	Command
examples/chart	`pnpm examples:chart dev`

Chart Snippet

See ExampleChart.tsx

const series: Series[] = generateSeriesArr([
  {
    xRange: { min: -100, max: 100 },
    yRange: { min: -100, max: 100 },
    type: 'line',
    count: 5,
    dataCount: 100,
  },
]);

return (
  <Chart
    height={480}
    width={640}
    series={series}
    xAxis={{
      label: 'X Axis',
    }}
    yAxis={{
      label: 'Y Axis',
    }}
  />
);

Configs (All properties are optional)

ChartDefaults

ChartConfig

height: number;
width: number;
xAxis: {
  position: 'top' | 'bottom';
  label: string;
  size: number;
  showZero: boolean;
}
yAxis: {
  position: 'left' | 'right';
  label: string;
  size: number;
  showZero: boolean;
}
x: {
  formatter: CoordFormatter;
  parser: CoordParser<CoordType>;
  key: string;
}
y: {
  formatter: CoordFormatter;
  parser: CoordParser<CoordType>;
  key: string;
}
theme: ChartThemeConfig;

ChartThemeConfig

backgroundColor: string;
margin: {
  left: number;
  top: number;
  right: number;
  bottom: number;
};
seriesColors: string[];
xAxis: {
  labelStyle: {
    fontSize: number;
    fontColor: string;
  };
  tickStyle: {
    color: string;
    zeroColor: string;
    labelStyle: {
      fontSize: number;
      fontColor: string;
    };
  };
};
yAxis: {
  labelStyle: {
    fontSize: number;
    fontColor: string;
  };
  tickStyle: {
    color: string;
    zeroColor: string;
    labelStyle: {
      fontSize: number;
      fontColor: string;
    };
  };
};

Contributing

Prerequisites

Steps

Clone the repository git clone https://github.com/chartext/chartext.git
Change into the created directory cd chartext
Run pnpm i

Running locally

Run pnpm examples:chart dev
Open up a browser and go to http://127.0.0.1:5173/chartext

Scripts

Command	Description
pnpm canvaskit	Alias to run scripts from packages/canvaskit/package.json
pnpm chart	Alias to run scripts from packages/chart/package.json
pnpm examples:chart	Alias to run scripts from examples/chart/package.json
lint:check	Runs ESLint to check for issues
lint:fix	Runs ESLint to fix as many issues as possible
prettier:check	Runs Prettier to check formatting
prettier:fix	Runs Prettier to fix formatting

vscode

Use (Ctrl + Shift + P) to open vscode's command palette and then execute >Reload Window

Extensions

See .vscode/extensions.json

Optional

References

chartext's People

Contributors

Stargazers

Watchers

chartext's Issues

Add dts bundling using qmhc/vite-plugin-dts

qmhc/vite-plugin-dts#194

Waiting for referenced issue to close.

Add controls for mock data example

Publish

Publish packages to npm repository

Migrate to pnpm

Add eslint-plugin-import

Waiting for the following issues to be resolved:

Fix y axis label on mobile

Import sorting is incorrect in vs code using typescript paths

When a new class is auto import vs code will add a project alias to the top of the list:

import { DrawSeriesProps } from '@/series/Series.types';
import { Canvas } from 'canvaskit-wasm';

But it needs add it to the bottom:

import { Canvas } from 'canvaskit-wasm';
import { DrawSeriesProps } from '@/series/Series.types';

Option to smooth the series lines

Typescript using dist instead of src folder for project references

When importing, for example, import { CkGraphics } from '@chartext/canvaskit'; typescript will link to packages/canvaskit/dist/index.d.ts instead of packages/canvaskit/src/CkGraphics.ts