charts's Introduction

Netdata frontend SDK and chart utilities

Storybook

https://netdata.github.io/charts

Install

npm:

  $ npm install @netdata/charts

yarn:

  $ yarn add @netdata/charts

Develop

  $ yarn start

Build

There are 3 different distributions. The following command creates the different distributions in the ./dist folder

  $ yarn build

Build the distributions isolated

UMD produces a single file ./dist/sdk.min.js what contains the entire bundle

  $ yarn build:umd

ES6 Builds the files using ES Modules in ./dist/es6/* folder

  $ yarn build:es6

cjs Builds the files using CommonJS in ./dist/* folder

  $ yarn build:cjs

Testing

  $ yarn test

Lint

  $ yarn lint

charts's People

Contributors

Stargazers

Watchers

charts's Issues

Not able to integrate NetData Charts

Please guide me to use NetData Charts .

Here is the my repo - https://github.com/muni2explore/net-charts

Not able to import the Line chart and facing the error

import { Line } from "@netdata/charts" getting the Line module not found error on my react app

Able to import via import { Line } from "@netdata/charts/dist/components/line";

import { ThemeProvider } from "styled-components"
import { DefaultTheme } from "@netdata/netdata-ui/lib/theme"
import { Line } from "@netdata/charts/dist/components/line";
import { camelizeKeys } from '@netdata/charts/dist/helpers/objectTransform/index';
import makeMockPayload from '@netdata/charts/dist/helpers/makeMockPayload/index';
import systemLoadLineChart from "@netdata/charts/dist/fixtures/systemLoadLineChart";
import systemLoadLine from "@netdata/charts/dist/fixtures/systemLoadLine";
import makeDefaultSDK from '@netdata/charts/dist/makeDefaultSDK';

const getChartMetadata = () => camelizeKeys(systemLoadLineChart, { omit: ["dimensions"] })
const getChart = makeMockPayload(systemLoadLine[0], { delay: 600 })


export default function NttChart() {
    const sdk = makeDefaultSDK({ getChartMetadata });
    const chart = sdk.makeChart({ getChart });
    sdk.appendChild(chart);
    
    return (
      <>
        <ThemeProvider theme={DefaultTheme}>
             <Line chart={chart} height="315px" />
        </ThemeProvider>
      </>
    );
  };

For the above code getting the chartCannot read properties of null (reading 'onAttributeChange') error.