Skip to content

Commit 2f5e69a

Browse files
ryo-manbaclaude
ryo-manba
and
claude
committed
fix: improve grid lines, legend spacing, and playground UX
- Grid x: draw vertical lines at each data point (not just left edge) - Playground grid labels: horizontal/vertical/both/none (clearer names) - Bottom legend: increase SVG height by 28px for proper spacing - Increase spacing between option sections in Playground Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent 77d5331 commit 2f5e69a

12 files changed

Lines changed: 2490 additions & 157 deletions

File tree

‎docs/src/components/Sidebar.astro‎

Lines changed: 52 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,30 +2,58 @@
22
const base = import.meta.env.BASE_URL.replace(/\/?$/, '/');
33
const currentPath = Astro.url.pathname;
44
5-
const sections = [
6-
{
7-
title: 'Getting Started',
8-
links: [
9-
{ href: `${base}docs/getting-started/`, label: 'Installation & Setup' },
10-
],
11-
},
12-
{
13-
title: 'Core Concepts',
14-
links: [
15-
{ href: `${base}docs/chart-types/`, label: 'Chart Types' },
16-
{ href: `${base}docs/animation/`, label: 'Animation' },
17-
{ href: `${base}docs/attributes/`, label: 'Attributes' },
18-
],
19-
},
20-
{
21-
title: 'Advanced',
22-
links: [
23-
{ href: `${base}docs/typescript/`, label: 'TypeScript' },
24-
{ href: `${base}docs/integration/`, label: 'Integration' },
25-
{ href: `${base}docs/anti-fouc/`, label: 'Anti-FOUC' },
26-
],
27-
},
28-
];
5+
const isJa = currentPath.includes('/ja/');
6+
const langPrefix = isJa ? 'ja/' : '';
7+
8+
const sections = isJa
9+
? [
10+
{
11+
title: 'はじめに',
12+
links: [
13+
{ href: `${base}${langPrefix}docs/getting-started/`, label: 'インストール & セットアップ' },
14+
],
15+
},
16+
{
17+
title: '基本',
18+
links: [
19+
{ href: `${base}${langPrefix}docs/chart-types/`, label: 'チャートタイプ' },
20+
{ href: `${base}${langPrefix}docs/animation/`, label: 'アニメーション' },
21+
{ href: `${base}${langPrefix}docs/attributes/`, label: '属性' },
22+
],
23+
},
24+
{
25+
title: '応用',
26+
links: [
27+
{ href: `${base}${langPrefix}docs/typescript/`, label: 'TypeScript' },
28+
{ href: `${base}${langPrefix}docs/integration/`, label: 'インテグレーション' },
29+
{ href: `${base}${langPrefix}docs/anti-fouc/`, label: 'Anti-FOUC' },
30+
],
31+
},
32+
]
33+
: [
34+
{
35+
title: 'Getting Started',
36+
links: [
37+
{ href: `${base}docs/getting-started/`, label: 'Installation & Setup' },
38+
],
39+
},
40+
{
41+
title: 'Core Concepts',
42+
links: [
43+
{ href: `${base}docs/chart-types/`, label: 'Chart Types' },
44+
{ href: `${base}docs/animation/`, label: 'Animation' },
45+
{ href: `${base}docs/attributes/`, label: 'Attributes' },
46+
],
47+
},
48+
{
49+
title: 'Advanced',
50+
links: [
51+
{ href: `${base}docs/typescript/`, label: 'TypeScript' },
52+
{ href: `${base}docs/integration/`, label: 'Integration' },
53+
{ href: `${base}docs/anti-fouc/`, label: 'Anti-FOUC' },
54+
],
55+
},
56+
];
2957
3058
function isActive(href: string): boolean {
3159
return currentPath === href || currentPath === href.replace(/\/$/, '');

‎docs/src/pages/ja/docs/animation.astro‎

Lines changed: 648 additions & 0 deletions
Large diffs are not rendered by default.

‎docs/src/pages/ja/docs/anti-fouc.mdx‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
---
2+
layout: ../../../layouts/DocsLayout.astro
3+
title: Anti-FOUC
4+
description: チャートレンダリング前のスタイル未適用テーブルのフラッシュを防止する方法。
5+
---
6+
7+
# Anti-FOUC
8+
9+
FOUC (Flash of Unstyled Content) は、JavaScript がテーブルをチャートに変換する前に、生のテーブルが一瞬表示される現象です。
10+
11+
## デフォルトの動作
12+
13+
data-chart は初期化時にすべての `table[data-chart]` 要素を非表示にする CSS を自動注入します。**ほとんどの場合、追加の CSS は不要です** -- スクリプトを読み込むだけで動作します:
14+
15+
```html
16+
<script src="https://unpkg.com/data-chart" defer></script>
17+
```
18+
19+
ただし、`defer` スクリプトは HTML パース後に実行されるため、スクリプト実行前にテーブルが表示される短い時間（通常 50ms 未満）があります。
20+
21+
## オプション: フラッシュを完全に排除
22+
23+
ゼロフラッシュの読み込みが必要な場合、`<head>` にインライン `<style>` を追加してください:
24+
25+
```html
26+
<style>
27+
table[data-chart] {
28+
visibility: hidden;
29+
position: absolute;
30+
width: 0; height: 0;
31+
overflow: hidden;
32+
}
33+
</style>
34+
```
35+
36+
これはレンダリング前にパースされるため、テーブルが表示されることはありません。同じルールはインポート可能な CSS ファイルとしても利用できます:
37+
38+
```js
39+
import 'data-chart/css';
40+
```
41+
42+
## `<noscript>` フォールバック
43+
44+
インライン Anti-FOUC CSS を使用する場合、JavaScript 無効時にテーブルがアクセス可能であるよう `<noscript>` フォールバックを追加してください:
45+
46+
```html
47+
<noscript>
48+
<style>
49+
table[data-chart] {
50+
visibility: visible;
51+
position: static;
52+
width: auto; height: auto;
53+
overflow: visible;
54+
}
55+
</style>
56+
</noscript>
57+
```
58+
59+
## レイアウトシフト (CLS) の防止
60+
61+
チャート SVG の挿入はレイアウトシフトを引き起こす可能性があります。これを防ぐには、`aspect-ratio` を使ってチャートコンテナのスペースを確保します:
62+
63+
```css
64+
.chart-wrapper {
65+
aspect-ratio: 500 / 220;
66+
}
67+
```
68+
69+
SVG の viewBox 幅は常に `500` です。高さのデフォルトは `220` で、`data-chart-height` で変更できます。カスタム高さを設定した場合は、比率も更新してください:
70+
71+
```html
72+
<table data-chart="bar" data-chart-height="300">...</table>
73+
```
74+
75+
```css
76+
.chart-wrapper {
77+
aspect-ratio: 500 / 300;
78+
}
79+
```
80+
81+
インライン Anti-FOUC CSS とスペース確保を組み合わせることで、CLS を効果的に排除できます。

‎docs/src/pages/ja/docs/attributes.mdx‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
---
2+
layout: ../../../layouts/DocsLayout.astro
3+
title: 属性
4+
description: data-chart の全 HTML 属性リファレンス。
5+
---
6+
7+
# 属性
8+
9+
すべての設定は HTML data 属性で行います。JavaScript の設定オブジェクトは不要です。
10+
11+
## 必須
12+
13+
| 属性 | 値 | 説明 |
14+
|-----------|--------|-------------|
15+
| `data-chart` | `bar` \| `line` \| `area` \| `pie` \| `donut` | チャートタイプ（必須） |
16+
17+
## レイアウト
18+
19+
| 属性 | 型 | デフォルト | 説明 |
20+
|-----------|------|---------|-------------|
21+
| `data-chart-height` | number | `220` | チャートの高さ（px）。幅は親要素に従います。 |
22+
| `data-chart-horizontal` | boolean | -- | 横棒グラフ。`bar` のみ。 |
23+
| `data-chart-stacked` | boolean | -- | 積み上げ棒グラフ。`bar` のみ。 |
24+
25+
## スタイリング
26+
27+
| 属性 | 型 | デフォルト | 説明 |
28+
|-----------|------|---------|-------------|
29+
| `data-chart-colors` | カンマ区切り hex | 自動パレット | カスタムシリーズ色。例: `"#2d5be3,#1a8c5a"` |
30+
| `data-chart-grid` | `y` \| `x` \| `both` \| `none` | `y` | グリッド線の方向 |
31+
| `data-chart-legend` | `top` \| `bottom` \| `none` | auto | 凡例の位置。Auto: 2シリーズ以上で `top`、1シリーズで `none`。 |
32+
| `data-chart-radius` | number | `3` | 棒の角丸半径（px） |
33+
34+
## アニメーション
35+
36+
| 属性 | 型 | デフォルト | 説明 |
37+
|-----------|------|---------|-------------|
38+
| `data-chart-animate` | boolean | -- | エントランスアニメーションを有効化 |
39+
| `data-chart-animate-duration` | number (ms) | `600` | 要素ごとのアニメーション時間 |
40+
| `data-chart-animate-stagger` | number (ms) | `60` | 要素間の遅延 |
41+
42+
## 使用例
43+
44+
### 最小構成
45+
46+
```html
47+
<table data-chart="bar">...</table>
48+
```
49+
50+
### フルオプション
51+
52+
```html
53+
<table
54+
data-chart="bar"
55+
data-chart-height="300"
56+
data-chart-colors="#e05898,#4a90d9,#1a8c5a"
57+
data-chart-grid="both"
58+
data-chart-legend="bottom"
59+
data-chart-radius="6"
60+
data-chart-stacked
61+
data-chart-animate
62+
data-chart-animate-duration="800"
63+
data-chart-animate-stagger="100"
64+
>
65+
...
66+
</table>
67+
```
68+
69+
## CSS カスタムプロパティ
70+
71+
data-chart は最小限のスタイルシートを注入し、1つのカスタムプロパティを持ちます:
72+
73+
```css
74+
:root {
75+
--dc-font-family: system-ui, -apple-system, sans-serif;
76+
}
77+
```
78+
79+
これを上書きすることで、軸ラベル、凡例、トグルボタンのフォントを変更できます。
80+
81+
## CSS クラス
82+
83+
| クラス | 要素 | 説明 |
84+
|-------|---------|-------------|
85+
| `.data-chart-container` | `<div>` | テーブル + SVG のラッパー |
86+
| `.data-chart-svg` | `<svg>` | チャート SVG 要素 |
87+
| `.data-chart-rendered` | `<table>` | 変換済みテーブルに付与 |
88+
| `.data-chart-grid` | `<g>` | グリッド線グループ |
89+
| `.data-chart-axis` | `<g>` | 軸ラベルグループ |
90+
| `.data-chart-series` | `<g>` | シリーズデータグループ |
91+
| `.data-chart-legend` | `<g>` | 凡例グループ |
92+
| `.data-chart-bar` | `<rect>` | 個々の棒 |
93+
| `.data-chart-line` | `<path>` | 折れ線パス |
94+
| `.data-chart-area` | `<path>` | エリア塗りつぶしパス |
95+
| `.data-chart-dot` | `<circle>` | データポイントのドット |
96+
| `.data-chart-slice` | `<path>` | 円/ドーナツスライス |

0 commit comments

Comments
 (0)