Skip to content

Commit 06af857

Browse files
author
lee
committed
bb.css 파일 추가.
1 parent 72ce126 commit 06af857

File tree

1 file changed

+341
-0
lines changed

1 file changed

+341
-0
lines changed

source/entryjs/api/2024-04-24-ml.md

Lines changed: 341 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,9 +83,350 @@ html에서 script태그를 사용하여 번들js와 css파일을 불러와 사
8383
```html
8484
# 설치경로에서 가져오기: 직접 추가한 경우
8585
<link rel='stylesheet' href='파일경로/entry-ml.css'/>
86+
<link rel='stylesheet' href='파일경로/bb.css'/>
8687
<script type="text/javascript" src='파일경로/entry-ml.js'></script>
8788
```
8889

90+
##### 추가로 bb.css 파일도 아래 코드를 복사하여 생성 후 추가해주시기 바랍니다.
91+
<details>
92+
<summary>bb.css</summary>
93+
94+
95+
```css
96+
.bb-color-pattern {
97+
background-image: url('#2d51ac;#4f80ff;#9fbaff;#a23941;#f16670;#fcad93;#423496;#6e5ae6;#c5b4ff;#2a7d7f;#00b6b1;#b3c3cd;');
98+
}
99+
100+
/*-- Chart --*/
101+
.bb svg {
102+
font-size: 12px;
103+
font-family: 'Meiryo', sans-serif, Arial, 'nanumgothic', 'Dotum';
104+
line-height: 1;
105+
}
106+
107+
.bb path,
108+
.bb line {
109+
fill: none;
110+
stroke: #2c313d;
111+
}
112+
113+
.bb text,
114+
.bb .bb-button {
115+
-webkit-user-select: none;
116+
-moz-user-select: none;
117+
-ms-user-select: none;
118+
user-select: none;
119+
fill: #2c313d;
120+
font-size: 11px;
121+
}
122+
123+
.bb-legend-item-title,
124+
.bb-xgrid-focus,
125+
.bb-ygrid,
126+
.bb-event-rect,
127+
.bb-bars path {
128+
shape-rendering: crispEdges;
129+
}
130+
131+
/*-- Axis --*/
132+
.bb-axis {
133+
shape-rendering: crispEdges;
134+
}
135+
136+
.bb-axis-y text,
137+
.bb-axis-y2 text {
138+
fill: #2c313d;
139+
}
140+
141+
.bb-event-rects {
142+
fill-opacity: 1 !important;
143+
}
144+
.bb-event-rects .bb-event-rect {
145+
fill: transparent;
146+
}
147+
.bb-event-rects .bb-event-rect._active_ {
148+
fill: rgba(39, 201, 3, 0.05);
149+
}
150+
151+
.tick._active_ text {
152+
fill: #00c83c !important;
153+
}
154+
155+
/*-- Grid --*/
156+
.bb-grid line {
157+
stroke: #f1f1f1;
158+
}
159+
160+
.bb-grid .bb-ygrid:last-child {
161+
stroke: #e9e9e9;
162+
}
163+
164+
.bb-xgrid-focus line {
165+
stroke: #ddd;
166+
}
167+
168+
/*-- Text on Chart --*/
169+
.bb-text.bb-empty {
170+
fill: #767676;
171+
}
172+
173+
/*-- Line --*/
174+
.bb-line {
175+
stroke-width: 1px;
176+
}
177+
178+
/*-- Point --*/
179+
.bb-circle._expanded_ {
180+
fill: #fff !important;
181+
stroke-width: 2px;
182+
stroke: red;
183+
}
184+
185+
rect.bb-circle._expanded_,
186+
use.bb-circle._expanded_ {
187+
stroke-width: 1px;
188+
}
189+
190+
.bb-selected-circle {
191+
fill: white;
192+
stroke-width: 2px;
193+
}
194+
195+
/*-- Bar --*/
196+
.bb-bar {
197+
stroke-width: 0;
198+
}
199+
.bb-bar._expanded_ {
200+
fill-opacity: 0.75;
201+
}
202+
203+
/*-- Focus --*/
204+
.bb-target.bb-focused {
205+
opacity: 1;
206+
}
207+
.bb-target.bb-focused path.bb-line,
208+
.bb-target.bb-focused path.bb-step {
209+
stroke-width: 2px;
210+
}
211+
212+
.bb-target.bb-defocused {
213+
opacity: 0.3 !important;
214+
}
215+
216+
/*-- Region --*/
217+
.bb-region {
218+
fill: steelblue;
219+
fill-opacity: 0.1;
220+
}
221+
.bb-region.selected rect {
222+
fill: #27c903;
223+
}
224+
225+
/*-- Zoom region --*/
226+
.bb-zoom-brush {
227+
fill-opacity: 0.1;
228+
}
229+
230+
/*-- Brush --*/
231+
.bb-brush .extent {
232+
fill-opacity: 0.1;
233+
}
234+
235+
/*-- Select - Drag --*/
236+
/*-- Legend --*/
237+
.bb-legend-item {
238+
-webkit-user-select: none;
239+
-moz-user-select: none;
240+
-ms-user-select: none;
241+
user-select: none;
242+
}
243+
244+
.bb-legend-item-hidden {
245+
opacity: 0.15;
246+
}
247+
248+
.bb-legend-background {
249+
opacity: 0.75;
250+
fill: white;
251+
stroke: lightgray;
252+
stroke-width: 1;
253+
}
254+
255+
/*-- Title --*/
256+
.bb-title {
257+
font-size: 14px;
258+
}
259+
260+
/*-- Tooltip --*/
261+
.bb-tooltip-container {
262+
z-index: 10;
263+
font-family: 'Meiryo', sans-serif, Arial, 'nanumgothic', 'Dotum';
264+
-webkit-user-select: none;
265+
-moz-user-select: none;
266+
-ms-user-select: none;
267+
user-select: none;
268+
}
269+
270+
.bb-tooltip {
271+
border-collapse: separate;
272+
border-spacing: 0;
273+
empty-cells: show;
274+
border: 1px solid #999;
275+
background-color: #fff;
276+
text-align: left;
277+
font-size: 11px;
278+
}
279+
.bb-tooltip th {
280+
font-size: 12px;
281+
padding: 4px 8px;
282+
text-align: left;
283+
border-bottom: solid 1px #eee;
284+
}
285+
.bb-tooltip td {
286+
padding: 4px 6px;
287+
background-color: #fff;
288+
}
289+
.bb-tooltip td:first-child {
290+
padding-left: 8px;
291+
}
292+
.bb-tooltip td:last-child {
293+
padding-right: 8px;
294+
}
295+
.bb-tooltip td > span,
296+
.bb-tooltip td > svg {
297+
display: inline-block;
298+
width: 10px;
299+
height: 10px;
300+
margin-right: 6px;
301+
border-radius: 5px;
302+
vertical-align: middle;
303+
}
304+
.bb-tooltip td.value {
305+
border-left: 1px solid transparent;
306+
}
307+
.bb-tooltip .bb-tooltip-title {
308+
display: inline-block;
309+
color: #aaa;
310+
line-height: 20px;
311+
}
312+
.bb-tooltip .bb-tooltip-detail table {
313+
border-collapse: collapse;
314+
border-spacing: 0;
315+
}
316+
.bb-tooltip .bb-tooltip-detail .bb-tooltip-name,
317+
.bb-tooltip .bb-tooltip-detail .bb-tooltip-value {
318+
font-size: 11px;
319+
line-height: 13px;
320+
padding: 4px 0 3px;
321+
color: #444;
322+
text-align: left;
323+
font-weight: normal;
324+
}
325+
.bb-tooltip .bb-tooltip-detail .bb-tooltip-value {
326+
padding-left: 5px;
327+
font-weight: 800;
328+
font-size: 12px;
329+
}
330+
331+
/*-- Area --*/
332+
.bb-area {
333+
stroke-width: 0;
334+
opacity: 0.2;
335+
}
336+
337+
/*-- Arc --*/
338+
.bb-chart-arcs-title {
339+
dominant-baseline: middle;
340+
font-size: 1.3em;
341+
}
342+
343+
.bb-chart-arcs-gauge-title {
344+
dominant-baseline: middle;
345+
font-size: 2.7em;
346+
}
347+
348+
.bb-chart-arcs .bb-chart-arcs-background {
349+
fill: #e0e0e0;
350+
stroke: none;
351+
}
352+
353+
.bb-chart-arcs .bb-chart-arcs-gauge-unit {
354+
fill: #000;
355+
font-size: 16px;
356+
}
357+
358+
.bb-chart-arcs .bb-chart-arcs-gauge-min,
359+
.bb-chart-arcs .bb-chart-arcs-gauge-max {
360+
fill: #777;
361+
}
362+
363+
.bb-chart-arcs .bb-chart-arcs-title {
364+
font-size: 16px !important;
365+
fill: #000;
366+
font-weight: 600;
367+
}
368+
369+
.bb-chart-arcs path.empty {
370+
fill: #eaeaea;
371+
stroke-width: 0;
372+
}
373+
374+
.bb-chart-arc .bb-gauge-value {
375+
fill: #000;
376+
}
377+
378+
.bb-chart-arc path {
379+
stroke: #fff;
380+
}
381+
382+
.bb-chart-arc text {
383+
fill: #fff;
384+
font-size: 13px;
385+
}
386+
387+
/*-- Radar --*/
388+
.bb-chart-radars .bb-levels polygon {
389+
fill: none;
390+
stroke: #848282;
391+
stroke-width: 0.5px;
392+
}
393+
394+
.bb-chart-radars .bb-levels text {
395+
fill: #848282;
396+
}
397+
398+
.bb-chart-radars .bb-axis line {
399+
stroke: #848282;
400+
stroke-width: 0.5px;
401+
}
402+
403+
.bb-chart-radars .bb-axis text {
404+
font-size: 1.15em;
405+
cursor: default;
406+
}
407+
408+
.bb-chart-radars .bb-shapes polygon {
409+
fill-opacity: 0.2;
410+
stroke-width: 1px;
411+
}
412+
413+
/*-- Button --*/
414+
.bb-button {
415+
position: absolute;
416+
top: 10px;
417+
right: 10px;
418+
}
419+
.bb-button .bb-zoom-reset {
420+
border: solid 1px #ccc;
421+
background-color: #fff;
422+
padding: 5px;
423+
border-radius: 5px;
424+
cursor: pointer;
425+
}
426+
427+
```
428+
</details>
429+
89430
<br >
90431

91432
<br >

0 commit comments

Comments
 (0)