Skip to content

Commit c1d6c30

Browse files
lee-sihunlee-sihun
authored
Merge pull request #38 from DmNote-App/feature/graph
Feature/graph
2 parents 2733019 + b8b401a commit c1d6c30

49 files changed

Lines changed: 6936 additions & 48 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎docs/content/en/custom-css/_meta.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ export default {
22
index: "Introduction",
33
"key-styling": "Key Styling",
44
"counter-styling": "Counter Styling",
5+
"graph-styling": "Graph Styling",
56
variables: "CSS Variable Reference",
67
examples: "Examples",
78
};

‎docs/content/en/custom-css/graph-styling/page.mdx‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
---
2+
title: Graph Styling
3+
description: How to customize graph backgrounds, borders, line/bar colors, and class-based CSS
4+
---
5+
6+
# Graph Styling
7+
8+
This guide explains how to apply custom CSS to graph elements.
9+
10+
## Basic Workflow
11+
12+
Graph elements support class assignment, just like keys and stat items.
13+
14+
1. Select a graph element.
15+
2. Enter a class name in the **Class** field in the properties panel.
16+
3. Target that class in custom CSS.
17+
18+
```css
19+
.kps-graph {
20+
backdrop-filter: blur(6px);
21+
}
22+
```
23+
24+
## Inline Style Priority vs CSS Priority
25+
26+
When **Inline Styles Priority** is enabled, property panel values take precedence.
27+
For graphs, **Inline Styles Priority is disabled by default**, so CSS-variable-based control works immediately.
28+
29+
<Callout type="info">
30+
Recommended: use class selectors to style specific graphs instead of broad global selectors.
31+
</Callout>
32+
33+
## Graph CSS Variables
34+
35+
Available graph variables:
36+
37+
| Variable | Description | Type | Example |
38+
| ---------------- | ---------------------- | ---------- | ------------------------ |
39+
| `--graph-bg` | Graph background | `<color>` | `rgba(17, 17, 20, 0.85)` |
40+
| `--graph-border` | Graph border | `<border>` | `1px solid #7dd3fc` |
41+
| `--graph-radius` | Graph corner radius | `<length>` | `10px` |
42+
| `--graph-color` | Line/bar drawing color | `<color>` | `#86efac` |
43+
44+
### Example
45+
46+
```css
47+
.kps-graph {
48+
--graph-bg: rgba(7, 10, 18, 0.72);
49+
--graph-border: 1px solid rgba(125, 211, 252, 0.55);
50+
--graph-radius: 12px;
51+
--graph-color: #7dd3fc;
52+
}
53+
```
54+
55+
## Style Examples
56+
57+
### Borderless Glass Panel
58+
59+
```css
60+
.kps-graph {
61+
--graph-bg: rgba(10, 14, 24, 0.42);
62+
--graph-border: none;
63+
--graph-radius: 14px;
64+
--graph-color: #93c5fd;
65+
backdrop-filter: blur(8px);
66+
}
67+
```
68+
69+
### Retro Terminal Style
70+
71+
```css
72+
.retro-graph {
73+
--graph-bg: rgba(6, 18, 6, 0.78);
74+
--graph-border: 1px solid #22c55e;
75+
--graph-radius: 6px;
76+
--graph-color: #22c55e;
77+
box-shadow: 0 0 8px rgba(34, 197, 94, 0.35) inset;
78+
}
79+
```
80+
81+
## Notes
82+
83+
- Graph position offsets use the same variables as keys: `--key-offset-x`, `--key-offset-y`.
84+
- To completely hide the border, use `--graph-border: none;` or set border width to `0` in the properties panel.

‎docs/content/en/custom-css/page.mdx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@ Here's a simple neon sign style example:
8989
<Cards>
9090
<Cards.Card title="Key Styling" href="/docs/custom-css/key-styling" />
9191
<Cards.Card title="Counter Styling" href="/docs/custom-css/counter-styling" />
92+
<Cards.Card title="Graph Styling" href="/docs/custom-css/graph-styling" />
9293
<Cards.Card
9394
title="CSS Variable Reference"
9495
href="/docs/custom-css/variables"

‎docs/content/en/custom-css/variables/page.mdx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,29 @@ CSS variables applied to counter elements. Use with `.counter[data-counter-state
7272
}
7373
```
7474

75+
## Graph Style Variables
76+
77+
CSS variables available for graph elements.
78+
Disable **Inline Styles Priority** on the graph to control these via CSS.
79+
80+
| Variable | Description | Type | Example |
81+
| ---------------- | ---------------------- | ---------- | ------------------------ |
82+
| `--graph-bg` | Graph background | `<color>` | `rgba(17, 17, 20, 0.85)` |
83+
| `--graph-border` | Graph border | `<border>` | `1px solid #7dd3fc` |
84+
| `--graph-radius` | Graph corner radius | `<length>` | `10px` |
85+
| `--graph-color` | Line/bar drawing color | `<color>` | `#86efac` |
86+
87+
### Usage Example
88+
89+
```css
90+
.kps-graph {
91+
--graph-bg: rgba(7, 10, 18, 0.72);
92+
--graph-border: 1px solid rgba(125, 211, 252, 0.55);
93+
--graph-radius: 12px;
94+
--graph-color: #7dd3fc;
95+
}
96+
```
97+
7598
## Selector Reference
7699

77100
### Key Selectors
@@ -92,6 +115,15 @@ CSS variables applied to counter elements. Use with `.counter[data-counter-state
92115
| `.counter[data-counter-state="active"]` | Active counters |
93116
| `.classname .counter[data-counter-state="active"]` | Counter of keys with specific class |
94117

118+
### Graph Selectors
119+
120+
| Selector | Description |
121+
| ------------------------- | ------------------------------------------------ |
122+
| `.graphClassName` | Style a specific graph container |
123+
| `.graphClassName svg` | Style line graph SVG (stroke/fill) |
124+
| `.graphClassName > div` | Style the inner plot area (line/bar shared) |
125+
| `.graphClassName > div > div` | Style individual bars in bar mode |
126+
95127
## Standard CSS Properties
96128

97129
In addition to CSS variables, you can freely use the following standard CSS properties:

‎docs/content/ko/custom-css/_meta.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ export default {
22
index: "소개",
33
"key-styling": "키 스타일링",
44
"counter-styling": "카운터 스타일링",
5+
"graph-styling": "그래프 스타일링",
56
variables: "CSS 변수 레퍼런스",
67
examples: "예제 모음",
78
};

‎docs/content/ko/custom-css/graph-styling/page.mdx‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
---
2+
title: 그래프 스타일링
3+
description: CSS로 그래프 요소의 배경, 테두리, 선 색상, 클래스 기반 스타일을 커스터마이징하는 방법
4+
---
5+
6+
# 그래프 스타일링
7+
8+
이 가이드는 그래프 요소에 커스텀 CSS를 적용하는 방법을 설명합니다.
9+
10+
## 기본 원칙
11+
12+
그래프 요소도 키/통계 요소처럼 속성 패널에서 클래스를 지정할 수 있습니다.
13+
14+
1. 그래프를 선택합니다.
15+
2. 속성 패널에서 **클래스 이름**을 입력합니다.
16+
3. 커스텀 CSS에서 해당 클래스 선택자를 사용합니다.
17+
18+
```css
19+
.kps-graph {
20+
backdrop-filter: blur(6px);
21+
}
22+
```
23+
24+
## 인라인 스타일 우선과 CSS 우선
25+
26+
그래프의 **인라인 스타일 우선**이 켜져 있으면 속성 패널 값이 우선 적용됩니다.
27+
그래프는 기본적으로 **인라인 스타일 우선이 꺼져 있으므로**, CSS 변수 기반 제어를 바로 사용할 수 있습니다.
28+
29+
<Callout type="info">
30+
권장: 특정 그래프에만 스타일을 적용하려면 전역 선택자 대신 클래스 선택자를 사용하세요.
31+
</Callout>
32+
33+
## 그래프 CSS 변수
34+
35+
그래프에서 사용할 수 있는 변수는 아래와 같습니다.
36+
37+
| 변수 | 설명 | 타입 | 예시 |
38+
| ---------------- | ----------- | ---------- | ------------------------ |
39+
| `--graph-bg` | 그래프 배경 | `<color>` | `rgba(17, 17, 20, 0.85)` |
40+
| `--graph-border` | 그래프 테두리 | `<border>` | `1px solid #7dd3fc` |
41+
| `--graph-radius` | 그래프 라운딩 | `<length>` | `10px` |
42+
| `--graph-color` | 라인/바 색상 | `<color>` | `#86efac` |
43+
44+
### 사용 예시
45+
46+
```css
47+
.kps-graph {
48+
--graph-bg: rgba(7, 10, 18, 0.72);
49+
--graph-border: 1px solid rgba(125, 211, 252, 0.55);
50+
--graph-radius: 12px;
51+
--graph-color: #7dd3fc;
52+
}
53+
```
54+
55+
## 스타일 예제
56+
57+
### 테두리 제거 + 유리 패널 느낌
58+
59+
```css
60+
.kps-graph {
61+
--graph-bg: rgba(10, 14, 24, 0.42);
62+
--graph-border: none;
63+
--graph-radius: 14px;
64+
--graph-color: #93c5fd;
65+
backdrop-filter: blur(8px);
66+
}
67+
```
68+
69+
### 레트로 터미널 느낌
70+
71+
```css
72+
.retro-graph {
73+
--graph-bg: rgba(6, 18, 6, 0.78);
74+
--graph-border: 1px solid #22c55e;
75+
--graph-radius: 6px;
76+
--graph-color: #22c55e;
77+
box-shadow: 0 0 8px rgba(34, 197, 94, 0.35) inset;
78+
}
79+
```
80+
81+
## 참고
82+
83+
- 그래프의 위치 이동 효과는 키와 동일하게 `--key-offset-x`, `--key-offset-y`를 사용합니다.
84+
- 테두리를 완전히 숨기려면 `--graph-border: none;` 또는 속성 패널 테두리 두께를 `0`으로 설정하세요.

‎docs/content/ko/custom-css/page.mdx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,7 @@ DM Note는 CSS 변수(Custom Properties)를 사용하여 스타일을 제어합
8686
<Cards>
8787
<Cards.Card title="키 스타일링" href="/docs/custom-css/key-styling" />
8888
<Cards.Card title="카운터 스타일링" href="/docs/custom-css/counter-styling" />
89+
<Cards.Card title="그래프 스타일링" href="/docs/custom-css/graph-styling" />
8990
<Cards.Card title="CSS 변수 레퍼런스" href="/docs/custom-css/variables" />
9091
<Cards.Card title="예제 모음" href="/docs/custom-css/examples" />
9192
</Cards>

‎docs/content/ko/custom-css/variables/page.mdx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,29 @@ DM Note에서 스타일링에 사용할 수 있는 모든 CSS 변수를 정리
7272
}
7373
```
7474

75+
## 그래프 스타일 변수
76+
77+
그래프 요소에 적용되는 CSS 변수입니다.
78+
그래프의 **인라인 스타일 우선**을 끄면 아래 변수를 통해 외형을 제어할 수 있습니다.
79+
80+
| 변수 | 설명 | 타입 | 예시 |
81+
| ---------------- | ------------- | ---------- | ------------------------ |
82+
| `--graph-bg` | 그래프 배경 | `<color>` | `rgba(17, 17, 20, 0.85)` |
83+
| `--graph-border` | 그래프 테두리 | `<border>` | `1px solid #7dd3fc` |
84+
| `--graph-radius` | 그래프 라운딩 | `<length>` | `10px` |
85+
| `--graph-color` | 라인/바 색상 | `<color>` | `#86efac` |
86+
87+
### 사용 예시
88+
89+
```css
90+
.kps-graph {
91+
--graph-bg: rgba(7, 10, 18, 0.72);
92+
--graph-border: 1px solid rgba(125, 211, 252, 0.55);
93+
--graph-radius: 12px;
94+
--graph-color: #7dd3fc;
95+
}
96+
```
97+
7598
## 선택자 레퍼런스
7699

77100
### 키 선택자
@@ -92,6 +115,15 @@ DM Note에서 스타일링에 사용할 수 있는 모든 CSS 변수를 정리
92115
| `.counter[data-counter-state="active"]` | 활성 상태의 카운터 |
93116
| `.클래스명 .counter[data-counter-state="active"]` | 특정 클래스를 가진 키의 카운터 |
94117

118+
### 그래프 선택자
119+
120+
| 선택자 | 설명 |
121+
| ----------------------- | ------------------------------------- |
122+
| `.그래프클래스명` | 특정 그래프 컨테이너 스타일링 |
123+
| `.그래프클래스명 svg` | 라인 그래프 SVG(선/채움) 스타일링 |
124+
| `.그래프클래스명 > div` | 그래프 내부 플롯 영역(라인/바 공통) |
125+
| `.그래프클래스명 > div > div` | 바 그래프 막대 개별 스타일링 (bar 모드) |
126+
95127
## 표준 CSS 속성
96128

97129
CSS 변수 외에도 다음 표준 CSS 속성들을 자유롭게 사용할 수 있습니다:

‎src-tauri/gen/schemas/acl-manifests.json‎

Lines changed: 3485 additions & 1 deletion
Large diffs are not rendered by default.

‎src-tauri/permissions/dmnote-allow-all.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,9 @@
7474
"plugin_storage_has_data",
7575
"plugin_storage_clear_by_prefix",
7676
"stat_positions_get",
77-
"stat_positions_update"
77+
"stat_positions_update",
78+
"graph_positions_get",
79+
"graph_positions_update"
7880
],
7981
"deny": []
8082
}

0 commit comments

Comments
 (0)