{"versions":{"0.1.0":{"name":"@berryv/g2-react","version":"0.1.0","description":"The lightweight React Component for @antv/g2.","author":{"name":"pearmini","url":"https://github.com/pearmini"},"license":"ISC","type":"module","main":"lib/index.js","module":"es/index.js","types":"es/index.d.ts","repository":{"type":"git","url":"git+https://github.com/berry-vis/g2-react.git"},"scripts":{"dev":"vite dev","build":"npm run build:lib && npm run build:es","build:lib":"rm -rf lib && tsc --module commonjs --outDir lib","build:es":"rm -rf es && tsc --module esnext --outDir es","prepublishOnly":"npm run build"},"sideEffects":false,"peerDependencies":{"@antv/g2":"^5.1.6","react":"^18.2.0"},"devDependencies":{"@antv/g-svg":"^1.10.14","@antv/g2":"^5.1.6","@types/react":"^18.2.21","@types/react-dom":"^18.2.7","jsdom":"^22.1.0","react":"^18.2.0","react-dom":"^18.2.0","typescript":"^5.2.2","vite":"^4.4.9"},"gitHead":"c918f9221d8e054fb4e0018040b7ae44f92c72a2","bugs":{"url":"https://github.com/berry-vis/g2-react/issues"},"homepage":"https://github.com/berry-vis/g2-react#readme","_id":"@berryv/g2-react@0.1.0","_nodeVersion":"14.18.3","_npmVersion":"6.14.15","dist":{"integrity":"sha512-wnsP2zA93O9bADZ8jGUTr1/NM52SbOlcDevSSUe/BI45tjzZC9Rc9blTPXgwtACHTeXghVZYzlpBoVNDV9XPhw==","shasum":"b9bf98b1bd5c6c8ce6a8eeedf103bed61f9ee3e5","tarball":"http://123.232.10.234:8212/nexus/content/groups/npm-public/@berryv/g2-react/-/g2-react-0.1.0.tgz","fileCount":11,"unpackedSize":13461,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCU7jVZHNEElOVbv/GIqM4ULTLfZLAOpIs6AzBjKiXGWAIhANmt1W6lMRAt8WOM8OMqPKXFv1dHgh2wExdyuaisVZ7l"}],"size":4234},"_npmUser":{"name":"anonymous","email":"subairui@icloud.com"},"directories":{},"maintainers":[{"name":"anonymous","email":"subairui@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/g2-react_0.1.0_1698137948045_0.6951961143374941"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2023-10-24T08:59:08.257Z","publish_time":1698137948257,"_source_registry_name":"default","contributors":[]}},"dist-tags":{"latest":"0.1.0"},"name":"@berryv/g2-react","time":{"created":"2023-10-24T08:59:36.408Z","modified":"2023-10-24T08:59:36.866Z","0.1.0":"2023-10-24T08:59:08.257Z"},"readme":"# @berryv/g2-react\n\nThe lightweight [React](https://react.dev/) component for [@antv/g2 5.0](https://github.com/antvis/G2), which is based on the [Spec API](https://g2.antv.antgroup.com/manual/core/api).\n\n## Installing\n\n```bash\n$ npm install @berryv/g2-react\n```\n\n```jsx\nimport React from \"react\";\nimport { Chart } from \"@berryv/g2-react\";\n\nexport function Demo() {\n  return (\n    <Chart\n      options={{\n        type: \"interval\",\n        width: 640,\n        height: 480,\n        data: [\n          { genre: \"Sports\", sold: 275 },\n          { genre: \"Strategy\", sold: 115 },\n          { genre: \"Action\", sold: 120 },\n          { genre: \"Shooter\", sold: 350 },\n          { genre: \"Other\", sold: 150 },\n        ],\n        encode: { x: \"genre\", y: \"sold\" },\n      }}\n    />\n  );\n}\n```\n\n## API Reference\n\n| Property | Description                                                                                                     | Type                  | Default |\n| -------- | --------------------------------------------------------------------------------------------------------------- | --------------------- | ------- |\n| options  | the [options](https://g2.antv.antgroup.com/manual/core/api) for the visualization, say `chart.options(options)` | `G2options` \\| `null` | -       |\n| renderer | the [renderer](https://g.antv.antgroup.com/api/renderer/intro) of @antv/g canvas                                | `ChartOptions`        | -       |\n| style    | the style of the container                                                                                      | `CSSProperties`       | -       |\n| onInit   | the callback called after the chart instantiating                                                               | `Function`            | -       |\n| ref      | the ref for the [chart instance](https://g2.antv.antgroup.com/manual/core/chart)                                | `ChartRef`            | -       |\n\n## Examples\n\n- [Creating Chart](#creating-chart)\n- [Fetching Data](#updating-data)\n- [Handling Events](#handling-events)\n- [Customizing Component](#customizing-component)\n- [Styling Container](#styling-container)\n\n## Creating Chart\n\nFor more examples for `props.options`, see each [G2 example](https://g2.antv.antgroup.com/examples) and click the \"Spec Tab\".\n\n```js\nimport React from \"react\";\nimport { Chart } from \"@berryv/g2-react\";\nimport { Renderer } from \"@antv/g-svg\";\n\nexport function Demo() {\n  const renderer = useMemo(() => new Renderer(), []);\n  return (\n    <Chart\n      // Set renderer to SVG, optional.\n      renderer={renderer}\n      options={{\n        type: \"interval\",\n        autoFit: true, // Fit the container.\n        data: [\n          { genre: \"Sports\", sold: 275 },\n          { genre: \"Strategy\", sold: 115 },\n          { genre: \"Action\", sold: 120 },\n          { genre: \"Shooter\", sold: 350 },\n          { genre: \"Other\", sold: 150 },\n        ],\n        encode: { x: \"genre\", y: \"sold\" },\n      }}\n    />\n  );\n}\n```\n\n### Updating Data\n\nUsing `useMemo` to define a computed options with data as a decency, this allows rerendering chart after the data updating.\n\n```js\nimport React, { useState, useMemo } from \"react\";\nimport { Chart } from \"@berryv/g2-react\";\n\nexport function Demo() {\n  const [data, setData] = useState(null);\n\n  // The options will update after data updating.\n  const options = useMemo(\n    () => ({\n      type: \"interval\",\n      data,\n      encode: { x: \"genre\", y: \"sold\" },\n    }),\n    [data]\n  );\n\n  useEffect(() => {\n    // Mock the fetch delay.\n    setTimeout(() => {\n      // Update the data.\n      setData([\n        { genre: \"Sports\", sold: 275 },\n        { genre: \"Strategy\", sold: 115 },\n        { genre: \"Action\", sold: 120 },\n        { genre: \"Shooter\", sold: 350 },\n        { genre: \"Other\", sold: 150 },\n      ]);\n    }, 1000);\n  });\n\n  return <>{data === null ? <p>Loading...</p> : <Chart options={options} />}</>;\n}\n```\n\n### Handling Events\n\n`<Chart/>` exposes the ref for the G2 [chart instance](https://g2.antv.antgroup.com/manual/core/chart), which can be used to handle events or get some instances, such as scale, coordinate, etc,.\n\n```js\nimport React, { useRef, useEffect } from \"react\";\nimport { ChartEvent } from \"@antv/g2\";\nimport { Chart } from \"@berryv/g2-react\";\n\nexport function Demo() {\n  const chartRef = useRef();\n\n  function onInit() {\n    const chart = chartRef.current;\n\n    // Listen input events.\n    chart.on(\"plot:mouseover\", () => {});\n\n    // Listen lifecycle events.\n    chart.on(ChartEvent.AFTER_RENDER, () => {\n      // Emit to init the state of highlight interaction.\n      chart.emit(\"element:highlight\", {\n        data: {\n          data: { genre: \"Sports\" },\n        },\n      });\n    });\n  }\n\n  return <Chart ref={chartRef} onInit={onInit} />;\n}\n```\n\n### Customizing Component\n\nWith the `register` API of G2, you can customize visual component and using it in options, such as customizing a triangle shape for bar chart:\n\n```js\nimport React, { useRef, useEffect } from \"react\";\nimport { register } from \"@antv/g2\";\n\n// Register a triangle shape for interval globally.\nregister(\"shape.interval.triangle\", (style, context) => {\n  const { document } = context;\n  return (P, value, defaults) => {\n    const { color: defaultColor } = defaults;\n    const [p0, p1, p2, p3] = P;\n    const pm = [(p0[0] + p1[0]) / 2, p0[1]];\n    const { color = defaultColor } = value;\n    const group = document.createElement(\"g\");\n    const polygon = document.createElement(\"polygon\", {\n      style: {\n        ...style,\n        fill: color,\n        points: [pm, p2, p3],\n      },\n    });\n    group.appendChild(polygon);\n    return group;\n  };\n});\n\nexport function Demo() {\n  return (\n    <Chart\n      options={{\n        type: \"interval\",\n        data: [\n          { genre: \"Sports\", sold: 275 },\n          { genre: \"Strategy\", sold: 115 },\n          { genre: \"Action\", sold: 120 },\n          { genre: \"Shooter\", sold: 350 },\n          { genre: \"Other\", sold: 150 },\n        ],\n        encode: {\n          x: \"genre\",\n          y: \"sold\",\n          shape: \"triangle\", // Use the custom shape.\n        },\n      }}\n    />\n  );\n}\n```\n\n### Styling Container\n\nDefine the css styles of the container:\n\n```js\nimport React from \"react\";\nimport { Chart } from \"@berryv/g2-react\";\n\nexport function Demo() {\n  // ...\n  return (\n    <Chart\n      options={{ autoFit: true }}\n      style={{\n        width: 800,\n        height: 600,\n        background: \"#eee\",\n        padding: \"1em\",\n        borderRadius: \"0.5em\",\n      }}\n    />\n  );\n}\n```","users":{}}