Neurotic Programmer Masquerade

    @antv/antv-spec
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.0-alpha.18 • Public • Published

    antv-spec

    A declarative grammar that supports various technology stacks of AntV.

    Features

    schema: uniform visualization schema for AntV
    adaptor: translate schema to chart library

    Installation

    npm install @antv/antv-spec

    Example

    import { useEffect } from "react";
    import { AntVSpec, specToG2Plot } from "@antv/antv-spec";
    
    export default function App() {
      const chartSpec: AntVSpec = {
        basis: {
          type: "chart"
        },
        data: {
          type: "json-array",
          values: [
            { year: "2007", sales: 28, type: "A" },
            { year: "2008", sales: 55, type: "A" },
            { year: "2009", sales: 43, type: "A" },
            { year: "2010", sales: 91, type: "A" },
            { year: "2011", sales: 81, type: "A" },
            { year: "2012", sales: 53, type: "A" },
            { year: "2013", sales: 19, type: "A" },
            { year: "2014", sales: 87, type: "A" },
            { year: "2015", sales: 52, type: "A" },
    
            { year: "2007", sales: 34, type: "B" },
            { year: "2008", sales: 52, type: "B" },
            { year: "2009", sales: 70, type: "B" },
            { year: "2010", sales: 11, type: "B" },
            { year: "2011", sales: 46, type: "B" },
            { year: "2012", sales: 79, type: "B" },
            { year: "2013", sales: 23, type: "B" },
            { year: "2014", sales: 54, type: "B" },
            { year: "2015", sales: 99, type: "B" }
          ]
        },
        layer: [
          {
            mark: {
              type: "line",
              style: { color: "#444444" }
            },
            encoding: {
              x: {
                field: "year",
                type: "temporal"
              },
              y: {
                field: "sales",
                type: "quantitative"
              },
              color: {
                field: "type",
                type: "nominal",
                scale: {
                  range: ["#5c0011", "#ffec3d", "#7cb305", "#08979c", "#003a8c"]
                }
              }
            }
          }
        ]
      };
    
      useEffect(() => {
        specToG2Plot(chartSpec, document.getElementById("container"));
      });
    
      return <div className="container"></div>;
    }

    Documentation

    This project is still an alpha version. We eagerly welcome any contribution.

    For more usages, please check the Quick API.

    Keywords

    none

    Install

    npm i @antv/antv-spec

    DownloadsWeekly Downloads

    848

    Version

    0.1.0-alpha.18

    License

    MIT

    Unpacked Size

    277 kB

    Total Files

    245

    Last publish

    Collaborators

    • biupiubiupiu
    • flash1
    • dreammy23
    • laixingui.lxg
    • zhangjunjie-loki
    • rainy25ghz
    • zeyuwang
    • yanxiong
    • susiwen8
    • freestyle21
    • soundquiet
    • elaine.q.10
    • sturuby
    • lviser
    • sakuya223
    • serializedowen
    • xdzhao
    • yangzhanmei
    • wjgogogo
    • leungwensen
    • dori
    • iaaron
    • yard
    • simaq
    • dxq613
    • intchous
    • susan_ann
    • jinke.li
    • lzxue
    • army8735
    • atool
    • baizn
    • dengfuping
    • neoddish
    • jeffy2012
    • zqlu
    • afc163
    • pomelo-nwu
    • kopiluwaky
    • ccnuzindex
    • panyuqi
    • bubkoo
    • zengyue
    • kasmine
    • boyu.zlj
    • l1ud0ngq1
    • newbyvector
    • winniexing
    • chenluli
    • kn9117
    • xdddst
    • semious2020
    • esora
    • nadia_liu
    • bbsqq
    • mxz96102
    • openwayne
    • pearmini
    • pddpd
    • yiqianyao
    • zhanba
    • cxxxxxn