Flutter数据分析服务插件cubejs_service的使用

Flutter数据分析服务插件cubejs_service的使用

cubejs_service 是一个Dart包，用于与Cube.js API交互，并获取图表所需的数据。它还支持将数据转换为FlSpot对象，以便在Flutter的fl_chart中使用。

特性

• 从Cube.js API获取原始数据。
• 将Cube.js数据转换为FlSpot以供fl_chart使用。
• 简单易用的API。

安装

在你的pubspec.yaml文件中添加以下依赖项：

dependencies:
  cubejs_service: ^0.0.1
  http: ^0.13.0
  fl_chart: ^0.40.0

然后运行：

flutter pub get

使用方法

1. 初始化CubeJS服务

首先，你需要初始化CubeJSService，并传入你的Cube Token和Base URL。

import 'package:cubejs_service/cubejs_service.dart';

void main() {
  CubeJSService cubeService = CubeJSService(
    cubeToken: 'your_cube_token',
    baseUrl: 'api.cubecloud.dev',
  );
}

2. 从Cube.js获取数据

要从Cube.js API获取原始数据，可以调用fetchRawData方法，并传入查询参数。

final query = {
  "measures": ["Orders.count"],
  "timeDimensions": [
    {
      "dimension": "Orders.createdAt",
      "dateRange": "Last 30 days"
    }
  ]
};

final rawData = await cubeService.fetchRawData(query);
print(rawData);

3. 将数据转换为FlSpot格式

你可以将获取到的数据转换为FlSpot数据点，以便在fl_chart中使用。

List<FlSpot> flSpots = cubeService.convertToFlData(
  List<Map<String, dynamic>>.from(rawData),
  'Orders.createdAt',
  'Orders.count',
);

print(flSpots);

示例代码

下面是一个完整的示例，展示了如何从Cube.js获取数据并将其转换为适合fl_chart的格式。

import 'package:flutter/material.dart';
import 'package:fl_chart/fl_chart.dart';
import 'package:cubejs_service/cubejs_service.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late CubeJSService cubeService;
  List<FlSpot> chartData = [];

  [@override](/user/override)
  void initState() {
    super.initState();
    cubeService = CubeJSService(
      cubeToken: 'your_cube_token',
      baseUrl: 'api.cubecloud.dev',
    );
    fetchData();
  }

  Future<void> fetchData() async {
    final query = {
      "measures": ["Orders.count"],
      "timeDimensions": [
        {
          "dimension": "Orders.createdAt",
          "dateRange": "Last 30 days"
        }
      ]
    };

    try {
      final rawData = await cubeService.fetchRawData(query);
      final flData = cubeService.convertToFlData(rawData, 'Orders.createdAt', 'Orders.count');
      setState(() {
        chartData = flData;
      });
    } catch (e) {
      print('Error fetching data: $e');
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('CubeJS with FL Chart')),
        body: Center(
          child: chartData.isNotEmpty
              ? LineChart(
                  LineChartData(
                    lineBarsData: [
                      LineChartBarData(
                        spots: chartData,
                        isCurved: true,
                        barWidth: 2,
                        colors: [Colors.blue],
                      ),
                    ],
                  ),
                )
              : CircularProgressIndicator(),
        ),
      ),
    );
  }
}