Skip to content
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

feat(HillChart): add gradient color capability #121

Open
wants to merge 3 commits into
base: dev
Choose a base branch
from
Open

feat(HillChart): add gradient color capability #121

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3998bfd
feat(HillChart): add gradient color
ader-h Jan 16, 2025
a0787d9
doc(HillChart): adjust case config
ader-h Jan 16, 2025
2e02f26
doc: supplementary case diagram
ader-h Jan 17, 2025
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
7 changes: 6 additions & 1 deletion public/example_data/HillChart.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,12 @@
"title": "基础形态",
"children": [
{
"name": "山峰图",
"name": "山峰图-渐变色",
"routePath": "HillChart-9",
"imagePath": "./image/theme/light/HillChart/HillChart-9.png"
Comment on lines +8 to +10
Copy link

Choose a reason for hiding this comment

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

💡 Codebase verification

Update image path to match the actual file structure

The image exists but the path in the configuration needs to be updated:

  • Change "./image/theme/light/HillChart/HillChart-9.png" to "./image/theme/hdesign-light/HillChart/HillChart-9.png"
🔗 Analysis chain

Verify image path exists for the new gradient variant.

The configuration looks correct, but ensure that the referenced image file exists at the specified path: ./image/theme/light/HillChart/HillChart-9.png

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Check if the referenced image file exists
fd -t f "HillChart-9.png" public/

Length of output: 150

},
Comment on lines +8 to +11
Copy link

Choose a reason for hiding this comment

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

💡 Codebase verification

Update image path to use correct theme directory

Please update the image path to use "hdesign-light" instead of "light":

"imagePath": "./image/theme/hdesign-light/HillChart/HillChart-9.png"
🔗 Analysis chain

Verify the new gradient configuration resources.

The gradient color variant looks good, but please ensure:

  1. The image exists at the specified path
  2. The corresponding configuration file HillChart-9.js is present with the gradient settings
🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Check if the image and configuration files exist
echo "Checking for image file..."
fd -t f "HillChart-9.png" public/

echo "Checking for configuration file..."
fd -t f "HillChart-9.js" public/

Length of output: 364

{
"name": "山峰图-纯色",
"routePath": "HillChart-1",
"imagePath": "./image/theme/light/HillChart/HillChart-1.png"
}
Expand Down
Binary file added public/image/theme/dark/CircleProcessChart/CircleProcessChart-3.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/image/theme/dark/HillChart/HillChart-9.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/image/theme/hdesign-dark/HillChart/HillChart-9.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/image/theme/hdesign-light/HillChart/HillChart-9.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/image/theme/light/CircleProcessChart/CircleProcessChart-3.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/image/theme/light/HillChart/HillChart-9.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
18 changes: 18 additions & 0 deletions public/option/HillChart/HillChart-9.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
const option = {
theme: 'hdesign-light',
color: ['#2070F380', '#62B42E80', '#715AFB80', '#2CB8C980'],
chartPadding: [50, 150, 50, 150],
data: [
{ name: 'BRAS 01', value: 86 },
{ name: 'BRAS 02', value: 60 },
{ name: 'BRAS 03', value: 40 },
{ name: 'BRAS 04', value: 31 }
],
text: {
fontSize: '12',
show: true
},
coincide: '-100%',
yAxisName: 'Units',
gradientColor: ['#2070F3', '#62B42E', '#715AFB', '#2CB8C9']
};
6 changes: 3 additions & 3 deletions src/components/HillChart/handleOption.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,15 +86,15 @@ export function setGradientColor(baseOpt, color, gradientColor, opacity, iChartO
colorStops: [
{
offset: 0,
color: codeToRGB(codeToHex(gradientColor[params.dataIndex % gradientColor.length]), opacity || 0.8),
color: !opacity ? gradientColor[params.dataIndex % gradientColor.length] : codeToRGB(codeToHex(gradientColor[params.dataIndex % gradientColor.length]), opacity || 0.8),
},
{
offset: 1,
color: codeToRGB(
color: !opacity ? iChartOption.color[params.dataIndex % gradientColor.length] : codeToRGB(
codeToHex(iChartOption.color[params.dataIndex % iChartOption.color.length]),
opacity || 0.8,
),
},
}
],
globalCoord: false,
};
Expand Down