opensource/kilocode
3
0
Fork 0
mirror of https://github.com/Kilo-Org/kilocode.git synced 2026-08-28 19:11:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(charts): update skill to use line variant for area chart

Browse Source
This commit is contained in:
cmanu
2026-07-28 13:10:11 -07:00
parent ac9a1b9d80
commit edc6976b72
2 changed files with 17 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.kilo/skills/chart/SKILL.md
+3 -1
View File
@@ -7,7 +7,7 @@ description: Use when the user asks to visualize data with charts, graphs, or pl
The `chart` tool is ALWAYS available in this environment. When the user asks to visualize data (charts, graphs, plots), you MUST call the `chart` tool. Never output the config as text, never say the tool is unavailable, never suggest external renderers. Always use the tool call — it is the only correct response for data visualization requests. Do NOT repeat or echo the config JSON in your text response.
Use the `chart` tool only when the user explicitly asks for a chart, graph, or plot. Only use these supported Chart.js v4 types: `area`, `bar`, `bubble`, `pie`, `doughnut`, `line`, `mixed`, `polarArea`, `radar`, `scatter`. Do not use it for any other type.
Use the `chart` tool only when the user explicitly asks for a chart, graph, or plot. Only use these supported Chart.js v4 types: `bar`, `bubble`, `pie`, `doughnut`, `line`, `mixed`, `polarArea`, `radar`, `scatter`. For area charts, use `line` with `fill: true` on the dataset — do NOT use `area` as a type.
Use mermaid fenced code blocks (` ```mermaid `) when:
- The user asks for a diagram, flowchart, sequence diagram, ER diagram, or architecture diagram
@@ -153,3 +153,5 @@ Mixed chart (bar + line):
```
You may customize colors by setting `backgroundColor` and `borderColor` arrays on datasets. The renderer handles sizing — do not set width or height.
Only include `scales` in `options` for cartesian chart types: `bar`, `line`, `scatter`, `bubble`. Do NOT include `scales` for `pie`, `doughnut`, `polarArea`, `radar`, or `mixed` — it will cause them to fail.
packages/opencode/src/kilocode/tool/chart.ts
+14 -1
View File
@@ -25,7 +25,7 @@ export const ChartTool = Tool.define(
Effect.gen(function* () {
return {
description:
"Render a data visualization chart using a Chart.js v4 config. Use this when the user explicitly asks for a chart, graph, or plot. Supported types: area, bar, bubble, pie, doughnut, line, mixed, polarArea, radar, scatter. Do NOT use this for diagrams, flowcharts, sequence diagrams, or any mermaid content — write those as mermaid fenced code blocks in your text response instead. After calling this tool, do NOT output the JSON spec or raw data in your text response — the chart is the response.",
"Render a data visualization chart using a Chart.js v4 config. Use this when the user explicitly asks for a chart, graph, or plot. Supported types: bar, bubble, pie, doughnut, line (use fill:true for area charts), mixed, polarArea, radar, scatter. Do NOT use this for diagrams, flowcharts, sequence diagrams, or any mermaid content — write those as mermaid fenced code blocks in your text response instead. After calling this tool, do NOT output the JSON spec or raw data in your text response — the chart is the response.",
parameters: Parameters,
execute: (params: Schema.Schema.Type<typeof Parameters>, ctx: Tool.Context) =>
Effect.gen(function* () {
@@ -53,6 +53,19 @@ export const ChartTool = Tool.define(
}
}
// "area" is not a Chart.js type — remap to line with fill
if ((spec as Record<string, unknown>).type === "area") {
const s = spec as Record<string, unknown>
s.type = "line"
const data = s.data as Record<string, unknown> | undefined
if (data && Array.isArray(data.datasets)) {
data.datasets = (data.datasets as Record<string, unknown>[]).map((ds) => ({
fill: true,
...ds,
}))
}
}
return {
title: params.title,
output: JSON.stringify(spec),