bb.css 파일 추가.

Author: lee

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

@@ -83,9 +83,350 @@ html에서 script태그를 사용하여 번들js와 css파일을 불러와 사
 ```html
 # 설치경로에서 가져오기: 직접 추가한 경우
 <link rel='stylesheet' href='파일경로/entry-ml.css'/>
+<link rel='stylesheet' href='파일경로/bb.css'/>
 <script type="text/javascript" src='파일경로/entry-ml.js'></script>
 ```
 
+##### 추가로 bb.css 파일도 아래 코드를 복사하여 생성 후 추가해주시기 바랍니다. 
+<details>
+<summary>bb.css</summary>
+
+
+```css
+.bb-color-pattern {
+    background-image: url('#2d51ac;#4f80ff;#9fbaff;#a23941;#f16670;#fcad93;#423496;#6e5ae6;#c5b4ff;#2a7d7f;#00b6b1;#b3c3cd;');
+}
+
+/*-- Chart --*/
+.bb svg {
+    font-size: 12px;
+    font-family: 'Meiryo', sans-serif, Arial, 'nanumgothic', 'Dotum';
+    line-height: 1;
+}
+
+.bb path,
+.bb line {
+    fill: none;
+    stroke: #2c313d;
+}
+
+.bb text,
+.bb .bb-button {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    fill: #2c313d;
+    font-size: 11px;
+}
+
+.bb-legend-item-title,
+.bb-xgrid-focus,
+.bb-ygrid,
+.bb-event-rect,
+.bb-bars path {
+    shape-rendering: crispEdges;
+}
+
+/*-- Axis --*/
+.bb-axis {
+    shape-rendering: crispEdges;
+}
+
+.bb-axis-y text,
+.bb-axis-y2 text {
+    fill: #2c313d;
+}
+
+.bb-event-rects {
+    fill-opacity: 1 !important;
+}
+.bb-event-rects .bb-event-rect {
+    fill: transparent;
+}
+.bb-event-rects .bb-event-rect._active_ {
+    fill: rgba(39, 201, 3, 0.05);
+}
+
+.tick._active_ text {
+    fill: #00c83c !important;
+}
+
+/*-- Grid --*/
+.bb-grid line {
+    stroke: #f1f1f1;
+}
+
+.bb-grid .bb-ygrid:last-child {
+    stroke: #e9e9e9;
+}
+
+.bb-xgrid-focus line {
+    stroke: #ddd;
+}
+
+/*-- Text on Chart --*/
+.bb-text.bb-empty {
+    fill: #767676;
+}
+
+/*-- Line --*/
+.bb-line {
+    stroke-width: 1px;
+}
+
+/*-- Point --*/
+.bb-circle._expanded_ {
+    fill: #fff !important;
+    stroke-width: 2px;
+    stroke: red;
+}
+
+rect.bb-circle._expanded_,
+use.bb-circle._expanded_ {
+    stroke-width: 1px;
+}
+
+.bb-selected-circle {
+    fill: white;
+    stroke-width: 2px;
+}
+
+/*-- Bar --*/
+.bb-bar {
+    stroke-width: 0;
+}
+.bb-bar._expanded_ {
+    fill-opacity: 0.75;
+}
+
+/*-- Focus --*/
+.bb-target.bb-focused {
+    opacity: 1;
+}
+.bb-target.bb-focused path.bb-line,
+.bb-target.bb-focused path.bb-step {
+    stroke-width: 2px;
+}
+
+.bb-target.bb-defocused {
+    opacity: 0.3 !important;
+}
+
+/*-- Region --*/
+.bb-region {
+    fill: steelblue;
+    fill-opacity: 0.1;
+}
+.bb-region.selected rect {
+    fill: #27c903;
+}
+
+/*-- Zoom region --*/
+.bb-zoom-brush {
+    fill-opacity: 0.1;
+}
+
+/*-- Brush --*/
+.bb-brush .extent {
+    fill-opacity: 0.1;
+}
+
+/*-- Select - Drag --*/
+/*-- Legend --*/
+.bb-legend-item {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.bb-legend-item-hidden {
+    opacity: 0.15;
+}
+
+.bb-legend-background {
+    opacity: 0.75;
+    fill: white;
+    stroke: lightgray;
+    stroke-width: 1;
+}
+
+/*-- Title --*/
+.bb-title {
+    font-size: 14px;
+}
+
+/*-- Tooltip --*/
+.bb-tooltip-container {
+    z-index: 10;
+    font-family: 'Meiryo', sans-serif, Arial, 'nanumgothic', 'Dotum';
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.bb-tooltip {
+    border-collapse: separate;
+    border-spacing: 0;
+    empty-cells: show;
+    border: 1px solid #999;
+    background-color: #fff;
+    text-align: left;
+    font-size: 11px;
+}
+.bb-tooltip th {
+    font-size: 12px;
+    padding: 4px 8px;
+    text-align: left;
+    border-bottom: solid 1px #eee;
+}
+.bb-tooltip td {
+    padding: 4px 6px;
+    background-color: #fff;
+}
+.bb-tooltip td:first-child {
+    padding-left: 8px;
+}
+.bb-tooltip td:last-child {
+    padding-right: 8px;
+}
+.bb-tooltip td > span,
+.bb-tooltip td > svg {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    margin-right: 6px;
+    border-radius: 5px;
+    vertical-align: middle;
+}
+.bb-tooltip td.value {
+    border-left: 1px solid transparent;
+}
+.bb-tooltip .bb-tooltip-title {
+    display: inline-block;
+    color: #aaa;
+    line-height: 20px;
+}
+.bb-tooltip .bb-tooltip-detail table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+.bb-tooltip .bb-tooltip-detail .bb-tooltip-name,
+.bb-tooltip .bb-tooltip-detail .bb-tooltip-value {
+    font-size: 11px;
+    line-height: 13px;
+    padding: 4px 0 3px;
+    color: #444;
+    text-align: left;
+    font-weight: normal;
+}
+.bb-tooltip .bb-tooltip-detail .bb-tooltip-value {
+    padding-left: 5px;
+    font-weight: 800;
+    font-size: 12px;
+}
+
+/*-- Area --*/
+.bb-area {
+    stroke-width: 0;
+    opacity: 0.2;
+}
+
+/*-- Arc --*/
+.bb-chart-arcs-title {
+    dominant-baseline: middle;
+    font-size: 1.3em;
+}
+
+.bb-chart-arcs-gauge-title {
+    dominant-baseline: middle;
+    font-size: 2.7em;
+}
+
+.bb-chart-arcs .bb-chart-arcs-background {
+    fill: #e0e0e0;
+    stroke: none;
+}
+
+.bb-chart-arcs .bb-chart-arcs-gauge-unit {
+    fill: #000;
+    font-size: 16px;
+}
+
+.bb-chart-arcs .bb-chart-arcs-gauge-min,
+.bb-chart-arcs .bb-chart-arcs-gauge-max {
+    fill: #777;
+}
+
+.bb-chart-arcs .bb-chart-arcs-title {
+    font-size: 16px !important;
+    fill: #000;
+    font-weight: 600;
+}
+
+.bb-chart-arcs path.empty {
+    fill: #eaeaea;
+    stroke-width: 0;
+}
+
+.bb-chart-arc .bb-gauge-value {
+    fill: #000;
+}
+
+.bb-chart-arc path {
+    stroke: #fff;
+}
+
+.bb-chart-arc text {
+    fill: #fff;
+    font-size: 13px;
+}
+
+/*-- Radar --*/
+.bb-chart-radars .bb-levels polygon {
+    fill: none;
+    stroke: #848282;
+    stroke-width: 0.5px;
+}
+
+.bb-chart-radars .bb-levels text {
+    fill: #848282;
+}
+
+.bb-chart-radars .bb-axis line {
+    stroke: #848282;
+    stroke-width: 0.5px;
+}
+
+.bb-chart-radars .bb-axis text {
+    font-size: 1.15em;
+    cursor: default;
+}
+
+.bb-chart-radars .bb-shapes polygon {
+    fill-opacity: 0.2;
+    stroke-width: 1px;
+}
+
+/*-- Button --*/
+.bb-button {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+}
+.bb-button .bb-zoom-reset {
+    border: solid 1px #ccc;
+    background-color: #fff;
+    padding: 5px;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+```
+</details>
+
 <br >
 
 <br >