@ray-js/stat-charts v3.1.0

General statistical chart

Installation

npm install @ray-js/stat-charts

Usage

Displays annual temperature statistics

import StatCharts from '@ray-js/stat-charts';

<StatCharts
  devIdList={['vdevo168473759041567']} // device id
  dpList={[{ id: 27, name: 'temperature' }]} // data point id and name
  unit="℃" // Data unit
  range="1month"
  type="avg" // Statistical Type: indicates the average value of the month
  startDate="202301" // Data start from January
  endDate="202312" // The data end time is December
  chartType={'line'} // Line chart
/>;

Collect device energy consumption data

import StatCharts from '@ray-js/stat-charts';

<StatCharts
  devIdList={['vdevo168473759041567']}
  dpList={[
    { id: 27, name: 'Temperature controller' },
    { id: 28, name: 'Ambient light' },
  ]}
  unit="kwH" // Unit kilowatt-hour
  range="15min" // One dot every 15 minutes
  startDate="20230522" // Collect the current day's data
  dataZoom={-30} // Zoom slide displays the right 30% of the data by default
  chartType="bar" // Bar chart
/>;

Customized Chart Header

import React, { useCallback } from 'react';
import { View, Text } from '@ray-js/ray';
import StatCharts from '@ray-js/stat-charts';
import styles from './index.module.less';

export function Home() {
  const renderTitle = useCallback(({ data }) => {
    const total = data?.[0]?.data?.reduce((acc, cur) => acc + +cur?.value || 0, 0) || 0;
    return (
      <View className={styles['title-container']}>
        <View>
          <Text className={styles['title-main-text']}>{total}</Text>
          <Text className={styles['title-unit-text']}>kWh</Text>
        </View>
        <View>
          <Text className={styles['title-value-text']}>Total Electricity Consumption</Text>
        </View>
      </View>
    );
  }, []);

  return (
    <StatCharts
      devIdList={['vdevo168473759041567']} // Device ID
      dpList={[{ id: 27, name: 'Electricity' }]} // Data Point ID and Name
      range="1month" // Data aggregated by month
      type="sum" // Statistic type, calculating the sum of electricity consumption for each month
      startDate="202301" // Start date of the data (January)
      endDate="202312" // End date of the data (December)
      renderTitle={renderTitle}
      chartType="bar" // Bar chart
    />
  );
}

./index.module.less

.title {
  &-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 56rpx;
  }

  &-main-text {
    font-weight: 700;
    font-size: 64rpx;
    line-height: 96rpx;
    color: #34363c;
    margin-right: 8rpx;
  }

  &-unit-text {
    font-weight: 500;
    font-size: 28rpx;
    line-height: 40rpx;
    color: #484a5f;
    opacity: 0.5;
  }

  &-value-text {
    font-weight: 400;
    font-size: 28rpx;
    line-height: 40rpx;
    color: #484a5f;
    opacity: 0.5;
  }
}