English | 简体中文

@ray-js/chart

Tuya Ray Chart, based on f2-v3

Notes

It is recommended to use @ray-js/common-charts (basic chart components based on ECharts) or @ray-js/stat-charts (business chart components with built-in smart metering interface capabilities) instead of this material component.

1. Since Function.prototype.toString is disabled in the online environment, onInit needs to pass in a template string. You can access F2, chart, data, theme, destructured extraData, callMethod, _ (lodash), and console.
2. Only es5 code can be written in the template string, but you can use lodash methods to achieve functionality by directly calling _..
3. Event callback functions must be wrapped with useCallback; otherwise, the chart will re-render when the page state changes.

Features

• Ready to use, no need to worry about polyfills
• Reduces mental burden, focusing on business development
• Solves the problem of f2 pinch and pan not working in mini-programs
• Built-in responsive light and dark theme support

Installation

$ npm install @ray-js/chart
// or
$ yarn add @ray-js/chart

Usage

Column Chart Selection

import React from 'react';
import Chart from '@ray-js/chart';
import data from '../mock/sales.json';

export default function ColumnSelect() {
  // To prevent the chart from re-rendering, callback functions must be wrapped with React.useCallback
  const onIntervalSelectStart = React.useCallback(event => {
    console.log('onIntervalSelectStart', event);
  }, []);
  const onIntervalSelectEnd = React.useCallback(event => {
    console.log('onIntervalSelectEnd', event);
  }, []);
  return (
    <Chart
      data={data}
      interactions={['interval-select']}
      onIntervalSelectStart={onIntervalSelectStart}
      onIntervalSelectEnd={onIntervalSelectEnd}
      onInit={`
        chart.interval().position('year*sales');
        chart.render();
        chart.interaction('interval-select', {
          // Use touchstart in mini-programs for normal performance
          startEvent: 'touchstart',
          onStart: function(ev) {
            callMethod('IntervalSelectStart', ev.data);
          },
          onEnd: function(ev) {
            callMethod('IntervalSelectEnd', ev.data);
          }
        })
      `}
    />
  );
}

Column Chart Pan

import React, { useState, useEffect } from 'react';
import Chart from '@ray-js/chart';
import data from '../mock/steps.json';

export default function ColumnPan() {
  const [dates, setDates] = useState([]);
  useEffect(() => {
    const originDates = [];
    data.forEach(obj => {
      if (obj.date >= '2018-05-01') {
        originDates.push(obj.date);
      }
    });
    setDates(originDates);
  }, []);

  // To prevent the chart from re-rendering, callback functions must be wrapped with React.useCallback
  const onPanStart = React.useCallback(event => {
    console.log('onPanStart', event);
  }, []);
  const onPanProcess = React.useCallback(event => {
    console.log('onPanProcess', event);
  }, []);
  const onPanEnd = React.useCallback(event => {
    console.log('onPanEnd', event);
  }, []);

  return (
    <Chart
      data={data}
      scale={{
        date: {
          type: 'timeCat',
          tickCount: 5,
          values: dates,
          mask: 'MM-DD',
        },
        steps: {
          tickCount: 5,
        },
      }}
      interactions={['pan']}
      onPanStart={onPanStart}
      onPanProcess={onPanProcess}
      onPanEnd={onPanEnd}
      plugins={['scrollBar']}
      onInit={`
        chart
          .interval()
          .position('date*steps')
          .style({
            radius: [2, 2, 0, 0],
          });
        chart.scrollBar({
          mode: 'x',
          xStyle: {
            backgroundColor: '#e8e8e8',
            fillerColor: '#808080',
            offsetY: -2,
          },
        });
        chart.interaction('pan', {
          onStart: function(ev) {
            callMethod('PanStart', ev)
          },
          onProcess: function(ev) {
            callMethod('PanProcess', ev);
          },
          onEnd: function(ev) {
            callMethod('PanEnd', ev);
          },
        })
        chart.render();
      `}
    />
  );
}

Column Chart Zoom

import React, { useState, useEffect } from 'react';
import Chart from '@ray-js/chart';
import data from '../mock/steps.json';

export default function ColumnPinch() {
  const [dates, setDates] = useState([]);
  useEffect(() => {
    const originDates = [];
    data.forEach(obj => {
      if (obj.date >= '2018-05-01') {
        originDates.push(obj.date);
      }
    });
    setDates(originDates);
  }, []);

  // To prevent the chart from re-rendering, callback functions must be wrapped with React.useCallback
  const onPinchStart = React.useCallback(event => {
    console.log('onPinchStart', event);
  }, []);
  const onPinchProcess = React.useCallback(event => {
    console.log('onPinchProcess', event);
  }, []);
  const onPinchEnd = React.useCallback(event => {
    console.log('onPinchEnd', event);
  }, []);

  return (
    <Chart
      data={data}
      scale={{
        date: {
          type: 'timeCat',
          tickCount: 5,
          values: dates,
          mask: 'MM-DD',
        },
        steps: {
          tickCount: 5,
        },
      }}
      interactions={['pinch']}
      onPinchStart={onPinchStart}
      onPinchProcess={onPinchProcess}
      onPinchEnd={onPinchEnd}
      onInit={`
        chart
          .interval()
          .position('date*steps')
          .style({
            radius: [2, 2, 0, 0],
          });
        chart.interaction('pinch', {
          onStart: function(ev) {
            callMethod('PinchStart', ev);
          },
          onProcess: function(ev) {
            callMethod('PinchProcess', ev);
          },
          onEnd: function(ev) {
            callMethod('PinchEnd', ev);
          },
        });
        chart.render();
      `}
    />
  );
}

Column Chart Swipe

import React from 'react';
import Chart from '@ray-js/chart';
import data from '../mock/sales.json';

export default function ColumnSwipe() {
  // To prevent the chart from re-rendering, callback functions must be wrapped with React.useCallback
  const onSwipeStart = React.useCallback(event => {
    console.log('onSwipeStart', event);
  }, []);
  const onSwipeEnd = React.useCallback(event => {
    console.log('onSwipeEnd', event);
  }, []);
  return (
    <Chart
      data={data}
      interactions={['swipe']}
      onSwipeStart={onSwipeStart}
      onSwipeEnd={onSwipeEnd}
      onInit={`
        chart.interval().position('year*sales');
        chart.interaction('swipe', {
          onStart: function(ev) {
            callMethod('SwipeStart', ev);
          },
          onEnd: function(ev) {
            callMethod('SwipeEnd', ev);
          },
        });
        chart.render()
      `}
    />
  );
}

Column Chart Tooltip

import React from 'react';
import Chart from '@ray-js/chart';
import data from '../mock/sales.json';

export default function ColumnTooltip() {
  // To prevent the chart from re-rendering, callback functions must be wrapped with React.useCallback
  const onTooltipShow = event => {
    console.log('onTooltipShow', event);
  };
  const onTooltipHide = React.useCallback(event => {
    console.log('onTooltipHide', event);
  }, []);
  return (
    <Chart
      data={data}
      onTooltipShow={onTooltipShow}
      onTooltipHide={onTooltipHide}
      onInit={`
        chart.interval().position('year*sales');
        chart.tooltip({
          showItemMarker: false,
          onShow: function(ev) {
            var items = ev.items;
            callMethod('TooltipShow', items[0]);
            items[0].name = null;
            items[0].name = items[0].title;
            items[0].value = '¥ ' + items[0].value;
          },
          onHide: function(ev) {
            callMethod('TooltipHide');
          }
        });
        chart.render();
      `}
    />
  );
}

Pie Chart Selection

import React from 'react';
import Chart from '@ray-js/chart';

const chartData = [
  {
    name: 'Youth',
    percent: 0.4,
    a: '1',
  },
  {
    name: 'Legend of the Demon Cat',
    percent: 0.2,
    a: '1',
  },
  {
    name: 'Bleeding Steel',
    percent: 0.18,
    a: '1',
  },
  {
    name: 'Guilty of Mind',
    percent: 0.15,
    a: '1',
  },
  {
    name: 'Coco',
    percent: 0.05,
    a: '1',
  },
  {
    name: 'Others',
    percent: 0.02,
    a: '1',
  },
];

export default function PieSelect() {
  // To prevent the chart from re-rendering, callback functions must be wrapped with React.useCallback
  const onPieSelectStart = React.useCallback(event => {
    console.log('onSwipeStart', event);
  }, []);
  const onPieSelectEnd = React.useCallback(event => {
    console.log('onSwipeEnd', event);
  }, []);
  return (
    <Chart
      data={chartData}
      onPieSelectStart={onPieSelectStart}
      onPieSelectEnd={onPieSelectEnd}
      interactions={['pie-select']}
      onInit={`
        chart.axis(false);
        chart.tooltip(false);
        chart.coord('polar', {
          transposed: true,
          radius: 0.85,
        });
        chart.interval().position('a*percent').color('name', [ '#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0' ]).adjust('stack')
          .style({
            lineWidth: 1,
            stroke: '#fff',
            lineJoin: 'round',
            lineCap: 'round'
          })
          .animate({
            appear: {
              duration: 1200,
              easing: 'bounceOut'
            }
          });
        chart.render();
        chart.interaction('pie-select', {
          // Use touchstart in mini-programs for normal performance
          startEvent: 'touchstart',
          onStart: function(ev) {
            callMethod('PieSelectStart', ev);
          },
          onEnd: function(ev) {
            callMethod('PieSelectEnd', ev.data);
          },
        });
      `}
    />
  );
}