# 通用统计图表

## 安装

```bash
npm install @ray-js/stat-charts
```

## 使用示例

### 展示全年气温统计

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

<StatCharts
  devIdList={['vdevo168473759041567']} // 设备 id
  dpList={[{ id: 27, name: '温度' }]} // 功能点 id 及 名称
  unit="℃" // 数据单位
  range="1month" // 以每个月为一个点
  type="avg" // 统计类型, 统计该月的平均值
  startDate="202301" // 数据开始时间 1月开始
  endDate="202312" // 数据结束时间 12月结束
  chartType={'line'} // 折线图
/>;
```

### 统计设备能耗数据

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

<StatCharts
  devIdList={['vdevo168473759041567']}
  dpList={[
    { id: 27, name: '温控器' },
    { id: 28, name: '氛围灯' },
  ]}
  unit="kwH" // 单位 千瓦时
  range="15min" // 每 15 分钟为一个点
  startDate="20230522" // 统计当天的数据
  dataZoom={-30} // 可缩放滑动 默认展示数据的右侧 30%
  chartType="bar" // 柱状图
/>;
```

### 自定义图表头部

```jsx
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']}>总电量</Text>
        </View>
      </View>
    );
  }, []);

  return (
    <StatCharts
      devIdList={['vdevo168473759041567']} // 设备 id
      dpList={[{ id: 27, name: '电量' }]} // 功能点 id 及 名称
      range="1month" // 以每个月为一个点
      type="sum" // 统计类型, 统计该月的平均值
      startDate="202301" // 数据开始时间 1月开始
      endDate="202312" // 数据结束时间 12月结束
      renderTitle={renderTitle}
      chartType="bar" // 柱状图
    />
  );
}
```

`./index.module.less`

```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;
  }
}
```