@use-morph/vega-lite

Install

yarn add @use-morph/vega-lite

Usage

サンプルコード

import { Flex, Grid, Text, Theme } from "@radix-ui/themes";
import * as VegaLiteEditor from "@usemorph/vega-lite-editor";
import "@radix-ui/themes/styles.css";
import { useState } from "react";
import { sampleVega } from "./sampleVega";
import { Vega } from "react-vega";

const fields: VegaLiteEditor.DataFields = {
  date: { type: "date" },
  precipitation: { type: "number" },
  temp_max: { type: "number" },
  temp_min: { type: "number" },
  wind: { type: "number" },
  weather: { type: "string" },
};

function App() {
  const [spec, setSpec] = useState<VegaLiteEditor.VisualizationSpec>(
    sampleVega as VegaLiteEditor.VisualizationSpec
  );

  const { shouldShowXAxisAggregate, shouldShowYAxisAggregate } =
    VegaLiteEditor.useVegaLiteUtil(spec);

  return (
    <div>
      <div className="grid grid-cols-2 gap-3">
        <VegaLiteEditor.Root value={spec} onChange={setSpec} fields={fields}>
          <div className="flex flex-col gap-3">
            <VegaLiteEditor.TypeSelect />
            {/* X Axis */}
            <div>X Axis</div>
            <div>Title</div>
            <VegaLiteEditor.XAsixTitle />
            <div>Value</div>
            <VegaLiteEditor.XAsixValue />
            {shouldShowXAxisAggregate && (
              <>
                <div>Aggregate</div>
                <VegaLiteEditor.XAsixAggregate />
              </>
            )}

            {/* Y Axis */}
            <div>Y Axis</div>
            <div>Title</div>
            <VegaLiteEditor.YAsixTitle />
            <div>Value</div>
            <VegaLiteEditor.YAsixValue />
            {shouldShowYAxisAggregate && (
              <>
                <div>Aggregate</div>
                <VegaLiteEditor.YAsixAggregate />
              </>
            )}
            <div style={{ margin: '24px 0' }}>{JSON.stringify(spec)}</div>
          </div>
        </VegaLiteEditor.Root>

        <Vega spec={spec} />
      </div>
    </div>
  );
}

export default App;

Utility

parseMorphVegaJson

Morph 仕様の json ファイルをデコードします。

• name: そのファイルの name
• data: dataフィールドの値。基本的には参照すべき Morph ワークスペース内の name
• spec: 純粋な VegaLite の spec

import { parseMorphVegaJson } from '@usemorph/vega-lite';

const { name, data, spec } = parseMorphVegaJson(jsonString);