Skip to content

docs: add area example #3118

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
lxfu1 wants to merge 1 commit into
base: master
Choose a base branch
from
+356 −0
Open

docs: add area example #3118

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
348 changes: 348 additions & 0 deletions site/examples/case/interactions/demo/area-fill.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,348 @@
import { Area } from '@ant-design/plots';
import React from 'react';
import { createRoot } from 'react-dom/client';

const DemoSegmentedArea = () => {
const config = {
paddingLeft: 25,
data: [
{
'gained > 100$': 7,
'gained <= 100$': 21,
'lost <= 100$': -59,
'lost > 100$': -13,
user: 'John',
key: 'lost > 100$',
value: -13,
},
{
'gained > 100$': 7,
'gained <= 100$': 21,
'lost <= 100$': -59,
'lost > 100$': -13,
user: 'John',
key: 'lost <= 100$',
value: -59,
},
{
'gained > 100$': 7,
'gained <= 100$': 21,
'lost <= 100$': -59,
'lost > 100$': -13,
user: 'John',
key: 'gained <= 100$',
value: 21,
},
{
'gained > 100$': 7,
'gained <= 100$': 21,
'lost <= 100$': -59,
'lost > 100$': -13,
user: 'John',
key: 'gained > 100$',
value: 7,
},
{
'gained > 100$': 13,
'gained <= 100$': 33,
'lost <= 100$': -51,
'lost > 100$': -3,
user: 'Raoul',
key: 'lost > 100$',
value: -3,
},
{
'gained > 100$': 13,
'gained <= 100$': 33,
'lost <= 100$': -51,
'lost > 100$': -3,
user: 'Raoul',
key: 'lost <= 100$',
value: -51,
},
{
'gained > 100$': 13,
'gained <= 100$': 33,
'lost <= 100$': -51,
'lost > 100$': -3,
user: 'Raoul',
key: 'gained <= 100$',
value: 33,
},
{
'gained > 100$': 13,
'gained <= 100$': 33,
'lost <= 100$': -51,
'lost > 100$': -3,
user: 'Raoul',
key: 'gained > 100$',
value: 13,
},
{
'gained > 100$': 24,
'gained <= 100$': 47,
'lost <= 100$': -29,
'lost > 100$': 0,
user: 'Jane',
key: 'lost > 100$',
value: 0,
},
{
'gained > 100$': 24,
'gained <= 100$': 47,
'lost <= 100$': -29,
'lost > 100$': 0,
user: 'Jane',
key: 'lost <= 100$',
value: -29,
},
{
'gained > 100$': 24,
'gained <= 100$': 47,
'lost <= 100$': -29,
'lost > 100$': 0,
user: 'Jane',
key: 'gained <= 100$',
value: 47,
},
{
'gained > 100$': 24,
'gained <= 100$': 47,
'lost <= 100$': -29,
'lost > 100$': 0,
user: 'Jane',
key: 'gained > 100$',
value: 24,
},
{
'gained > 100$': 0,
'gained <= 100$': 16,
'lost <= 100$': -84,
'lost > 100$': 0,
user: 'Marcel',
key: 'lost > 100$',
value: 0,
},
{
'gained > 100$': 0,
'gained <= 100$': 16,
'lost <= 100$': -84,
'lost > 100$': 0,
user: 'Marcel',
key: 'lost <= 100$',
value: -84,
},
{
'gained > 100$': 0,
'gained <= 100$': 16,
'lost <= 100$': -84,
'lost > 100$': 0,
user: 'Marcel',
key: 'gained <= 100$',
value: 16,
},
{
'gained > 100$': 0,
'gained <= 100$': 16,
'lost <= 100$': -84,
'lost > 100$': 0,
user: 'Marcel',
key: 'gained > 100$',
value: 0,
},
{
'gained > 100$': 23,
'gained <= 100$': 44,
'lost <= 100$': -20,
'lost > 100$': -13,
user: 'Ibrahim',
key: 'lost > 100$',
value: -13,
},
{
'gained > 100$': 23,
'gained <= 100$': 44,
'lost <= 100$': -20,
'lost > 100$': -13,
user: 'Ibrahim',
key: 'lost <= 100$',
value: -20,
},
{
'gained > 100$': 23,
'gained <= 100$': 44,
'lost <= 100$': -20,
'lost > 100$': -13,
user: 'Ibrahim',
key: 'gained <= 100$',
value: 44,
},
{
'gained > 100$': 23,
'gained <= 100$': 44,
'lost <= 100$': -20,
'lost > 100$': -13,
user: 'Ibrahim',
key: 'gained > 100$',
value: 23,
},
{
'gained > 100$': 3,
'gained <= 100$': 38,
'lost <= 100$': -42,
'lost > 100$': -17,
user: 'Junko',
key: 'lost > 100$',
value: -17,
},
{
'gained > 100$': 3,
'gained <= 100$': 38,
'lost <= 100$': -42,
'lost > 100$': -17,
user: 'Junko',
key: 'lost <= 100$',
value: -42,
},
{
'gained > 100$': 3,
'gained <= 100$': 38,
'lost <= 100$': -42,
'lost > 100$': -17,
user: 'Junko',
key: 'gained <= 100$',
value: 38,
},
{
'gained > 100$': 3,
'gained <= 100$': 38,
'lost <= 100$': -42,
'lost > 100$': -17,
user: 'Junko',
key: 'gained > 100$',
value: 3,
},
{
'gained > 100$': 1,
'gained <= 100$': 3,
'lost <= 100$': -77,
'lost > 100$': -19,
user: 'Lyu',
key: 'lost > 100$',
value: -19,
},
{
'gained > 100$': 1,
'gained <= 100$': 3,
'lost <= 100$': -77,
'lost > 100$': -19,
user: 'Lyu',
key: 'lost <= 100$',
value: -77,
},
{
'gained > 100$': 1,
'gained <= 100$': 3,
'lost <= 100$': -77,
'lost > 100$': -19,
user: 'Lyu',
key: 'gained <= 100$',
value: 3,
},
{
'gained > 100$': 1,
'gained <= 100$': 3,
'lost <= 100$': -77,
'lost > 100$': -19,
user: 'Lyu',
key: 'gained > 100$',
value: 1,
},
{
'gained > 100$': 28,
'gained <= 100$': 59,
'lost <= 100$': -9,
'lost > 100$': -4,
user: 'André',
key: 'lost > 100$',
value: -4,
},
{
'gained > 100$': 28,
'gained <= 100$': 59,
'lost <= 100$': -9,
'lost > 100$': -4,
user: 'André',
key: 'lost <= 100$',
value: -9,
},
{
'gained > 100$': 28,
'gained <= 100$': 59,
'lost <= 100$': -9,
'lost > 100$': -4,
user: 'André',
key: 'gained <= 100$',
value: 59,
},
{
'gained > 100$': 28,
'gained <= 100$': 59,
'lost <= 100$': -9,
'lost > 100$': -4,
user: 'André',
key: 'gained > 100$',
value: 28,
},
{
'gained > 100$': 1,
'gained <= 100$': 9,
'lost <= 100$': -80,
'lost > 100$': -10,
user: 'Maki',
key: 'lost > 100$',
value: -10,
},
{
'gained > 100$': 1,
'gained <= 100$': 9,
'lost <= 100$': -80,
'lost > 100$': -10,
user: 'Maki',
key: 'lost <= 100$',
value: -80,
},
{
'gained > 100$': 1,
'gained <= 100$': 9,
'lost <= 100$': -80,
'lost > 100$': -10,
user: 'Maki',
key: 'gained <= 100$',
value: 9,
},
{
'gained > 100$': 1,
'gained <= 100$': 9,
'lost <= 100$': -80,
'lost > 100$': -10,
user: 'Maki',
key: 'gained > 100$',
value: 1,
},
],
encode: { x: 'user', y: 'value', color: 'key' },
shapeField: 'smooth',
scale: {
y: { domainMin: -100, domainMax: 100 },
color: {
domain: ['lost > 100$', 'lost <= 100$', 'gained <= 100$', 'gained > 100$'],
range: ['#61cdbb', '#97e3d5', '#f47560', '#e25c3b'],
},
},
};

return <Area {...config} />;
};
Comment on lines +5 to +346
Copy link

@gemini-code-assist gemini-code-assist bot Dec 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

critical

The component implementation can be improved for correctness, readability, and maintainability.

  1. Critical Syntax Error: The config object literal is missing commas between its properties (data, encode, shapeField), which will cause a JavaScript syntax error and prevent the component from rendering.
  2. Incorrect Property: The shapeField: 'smooth' property is not the correct way to create a smooth area chart. You should use shape: 'smooth' instead.
  3. Data Structure: The data array is extremely verbose and contains a lot of redundant information. This makes the code hard to read and maintain. It's much cleaner to define the source data in a compact "wide" format and then programmatically transform it into the "long" format required by the chart.

I've combined fixes for all these issues into a single refactoring suggestion for the entire component.

const DemoSegmentedArea = () => {
  const sourceData = [
    { user: 'John', 'gained > 100$': 7, 'gained <= 100$': 21, 'lost <= 100$': -59, 'lost > 100$': -13 },
    { user: 'Raoul', 'gained > 100$': 13, 'gained <= 100$': 33, 'lost <= 100$': -51, 'lost > 100$': -3 },
    { user: 'Jane', 'gained > 100$': 24, 'gained <= 100$': 47, 'lost <= 100$': -29, 'lost > 100$': 0 },
    { user: 'Marcel', 'gained > 100$': 0, 'gained <= 100$': 16, 'lost <= 100$': -84, 'lost > 100$': 0 },
    { user: 'Ibrahim', 'gained > 100$': 23, 'gained <= 100$': 44, 'lost <= 100$': -20, 'lost > 100$': -13 },
    { user: 'Junko', 'gained > 100$': 3, 'gained <= 100$': 38, 'lost <= 100$': -42, 'lost > 100$': -17 },
    { user: 'Lyu', 'gained > 100$': 1, 'gained <= 100$': 3, 'lost <= 100$': -77, 'lost > 100$': -19 },
    { user: 'André', 'gained > 100$': 28, 'gained <= 100$': 59, 'lost <= 100$': -9, 'lost > 100$': -4 },
    { user: 'Maki', 'gained > 100$': 1, 'gained <= 100$': 9, 'lost <= 100$': -80, 'lost > 100$': -10 },
  ];

  const keys = ['lost > 100$', 'lost <= 100$', 'gained <= 100$', 'gained > 100$'];

  const data = sourceData.flatMap((item) => {
    return keys.map((key) => ({
      user: item.user,
      key,
      value: item[key],
    }));
  });

  const config = {
    paddingLeft: 25,
    data,
    encode: { x: 'user', y: 'value', color: 'key' },
    shape: 'smooth',
    scale: {
      y: { domainMin: -100, domainMax: 100 },
      color: {
        domain: keys,
        range: ['#61cdbb', '#97e3d5', '#f47560', '#e25c3b'],
      },
    },
  };

  return <Area {...config} />;
};


createRoot(document.getElementById('container')).render(<DemoSegmentedArea />);
Copy link

@coderabbitai coderabbitai bot Dec 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

挂载点可能为 null：建议加守卫避免 demo 页直接报错
document.getElementById('container') 若返回 null，createRoot(null) 会直接抛错，导致整页示例不可用。建议显式判空。

-createRoot(document.getElementById('container')).render(<DemoSegmentedArea />);
+const container = document.getElementById('container');
+if (container) {
+  createRoot(container).render(<DemoSegmentedArea />);
+}
🤖 Prompt for AI Agents 
In site/examples/case/interactions/demo/area-fill.js around line 348, the mount
target may be null causing createRoot(null) to throw; add a null check for
document.getElementById('container') before calling createRoot and only call
createRoot(...).render(...) when the element exists (otherwise log a warning or
no-op) to prevent the demo page from crashing.

8 changes: 8 additions & 0 deletions site/examples/case/interactions/demo/meta.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,14 @@
"en": "Quadrants"
},
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*g8i_Ra_TBKkAAAAAQ3AAAAgAemJ7AQ/fmt.webp"
},
{
"filename": "area-fill.js",
"title": {
"zh": "根据数值填充面积颜色",
"en": "According to value fill area color"
Copy link

@gemini-code-assist gemini-code-assist bot Dec 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The English title "According to value fill area color" is grammatically awkward and not very idiomatic. A clearer and more natural title would improve the documentation for English-speaking users.

Suggested change
"en": "According to value fill area color"
"en": "Fill Area Color by Value"

},
"screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*NK-mRpMz-UUAAAAARNAAAAgAemJ7AQ/fmt.webp"
}
]
}
Loading