Base UI
NPM Installation / build (16.x, ubuntu-latest) (push) Has been cancelled
NPM Installation / build (16.x, windows-latest) (push) Has been cancelled
NPM Installation / build (17.x, ubuntu-latest) (push) Has been cancelled
NPM Installation / build (17.x, windows-latest) (push) Has been cancelled
NPM Installation / build (18.x, ubuntu-latest) (push) Has been cancelled
NPM Installation / build (18.x, windows-latest) (push) Has been cancelled
NPM Installation / build (16.x, ubuntu-latest) (push) Has been cancelled
NPM Installation / build (16.x, windows-latest) (push) Has been cancelled
NPM Installation / build (17.x, ubuntu-latest) (push) Has been cancelled
NPM Installation / build (17.x, windows-latest) (push) Has been cancelled
NPM Installation / build (18.x, ubuntu-latest) (push) Has been cancelled
NPM Installation / build (18.x, windows-latest) (push) Has been cancelled
This commit is contained in:
+22
@@ -0,0 +1,22 @@
|
||||
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2025 creativeLabs Lukasz Holeczek
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
## [CoreUI](https:/coreui.io) Chart.js utities
|
||||
|
||||
|
||||
+55
@@ -0,0 +1,55 @@
|
||||
@charset "UTF-8";
|
||||
/*!
|
||||
* CoreUI Plugins - Chart.js for CoreUI 5.x
|
||||
* @version v4.2.0
|
||||
* @link https://coreui.io
|
||||
* Copyright (c) 2025 creativeLabs Łukasz Holeczek
|
||||
* Licensed under MIT (https://github.com/coreui/coreui-chartjs/blob/main/LICENSE)
|
||||
*/
|
||||
.chartjs-tooltip {
|
||||
--cui-chartjs-tooltip-zindex: 1080;
|
||||
--cui-chartjs-tooltip-padding-x: 0.5rem;
|
||||
--cui-chartjs-tooltip-padding-y: 0.25rem;
|
||||
--cui-chartjs-tooltip-color: var(--cui-body-bg);
|
||||
--cui-chartjs-tooltip-bg: rgba(var(--cui-emphasis-color-rgb), 0.8);
|
||||
--cui-chartjs-tooltip-border-radius: var(--cui-border-radius);
|
||||
--cui-chartjs-tooltip-transition: all 0.15s ease;
|
||||
--cui-chartjs-tooltip-header-margin: 0.5rem;
|
||||
--cui-chartjs-tooltip-header-font-size: 0.875rem;
|
||||
--cui-chartjs-tooltip-header-font-weight: 700;
|
||||
--cui-chartjs-tooltip-body-font-size: 0.875rem;
|
||||
--cui-chartjs-tooltip-body-font-weight: 400;
|
||||
position: absolute;
|
||||
z-index: var(--cui-chartjs-tooltip-zindex);
|
||||
padding: var(--cui-chartjs-tooltip-padding-y) var(--cui-chartjs-tooltip-padding-x);
|
||||
color: var(--cui-chartjs-tooltip-color);
|
||||
pointer-events: none;
|
||||
background: var(--cui-chartjs-tooltip-bg);
|
||||
opacity: 0;
|
||||
transform: translate(-50%, 0);
|
||||
border-radius: var(--cui-chartjs-tooltip-border-radius);
|
||||
transition: var(--cui-chartjs-tooltip-transition);
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.chartjs-tooltip {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.chartjs-tooltip-header {
|
||||
margin-bottom: var(--cui-chartjs-tooltip-header-margin);
|
||||
}
|
||||
|
||||
.chartjs-tooltip-header-item {
|
||||
font-size: var(--cui-chartjs-tooltip-header-font-size);
|
||||
font-weight: var(--cui-chartjs-tooltip-header-font-weight);
|
||||
}
|
||||
|
||||
.chartjs-tooltip-body-item {
|
||||
align-items: center;
|
||||
font-size: var(--cui-chartjs-tooltip-body-font-size);
|
||||
font-weight: var(--cui-chartjs-tooltip-body-font-weight);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=coreui-chartjs.css.map */
|
||||
+1
File diff suppressed because one or more lines are too long
+8
@@ -0,0 +1,8 @@
|
||||
@charset "UTF-8";/*!
|
||||
* CoreUI Plugins - Chart.js for CoreUI 5.x
|
||||
* @version v4.2.0
|
||||
* @link https://coreui.io
|
||||
* Copyright (c) 2025 creativeLabs Łukasz Holeczek
|
||||
* Licensed under MIT (https://github.com/coreui/coreui-chartjs/blob/main/LICENSE)
|
||||
*/.chartjs-tooltip{--cui-chartjs-tooltip-zindex:1080;--cui-chartjs-tooltip-padding-x:0.5rem;--cui-chartjs-tooltip-padding-y:0.25rem;--cui-chartjs-tooltip-color:var(--cui-body-bg);--cui-chartjs-tooltip-bg:rgba(var(--cui-emphasis-color-rgb), 0.8);--cui-chartjs-tooltip-border-radius:var(--cui-border-radius);--cui-chartjs-tooltip-transition:all 0.15s ease;--cui-chartjs-tooltip-header-margin:0.5rem;--cui-chartjs-tooltip-header-font-size:0.875rem;--cui-chartjs-tooltip-header-font-weight:700;--cui-chartjs-tooltip-body-font-size:0.875rem;--cui-chartjs-tooltip-body-font-weight:400;position:absolute;z-index:var(--cui-chartjs-tooltip-zindex);padding:var(--cui-chartjs-tooltip-padding-y) var(--cui-chartjs-tooltip-padding-x);color:var(--cui-chartjs-tooltip-color);pointer-events:none;background:var(--cui-chartjs-tooltip-bg);opacity:0;transform:translate(-50%,0);border-radius:var(--cui-chartjs-tooltip-border-radius);transition:var(--cui-chartjs-tooltip-transition)}@media (prefers-reduced-motion:reduce){.chartjs-tooltip{transition:none}}.chartjs-tooltip-header{margin-bottom:var(--cui-chartjs-tooltip-header-margin)}.chartjs-tooltip-header-item{font-size:var(--cui-chartjs-tooltip-header-font-size);font-weight:var(--cui-chartjs-tooltip-header-font-weight)}.chartjs-tooltip-body-item{align-items:center;font-size:var(--cui-chartjs-tooltip-body-font-size);font-weight:var(--cui-chartjs-tooltip-body-font-weight);white-space:nowrap}
|
||||
/*# sourceMappingURL=coreui-chartjs.min.css.map */
|
||||
+1
File diff suppressed because one or more lines are too long
+110
@@ -0,0 +1,110 @@
|
||||
/*!
|
||||
* CoreUI v4.2.0 (https://coreui.io)
|
||||
* Copyright 2025 [object Object]
|
||||
* Licensed under MIT (https://github.com/coreui/coreui-chartjs/blob/main/LICENSE)
|
||||
*/
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Custom Tooltips for Chart.js (v4.2.0): custom-tooltips.js
|
||||
* Licensed under MIT (https://github.com/coreui/coreui-chartjs/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const ClassName = {
|
||||
TOOLTIP: 'chartjs-tooltip',
|
||||
TOOLTIP_BODY: 'chartjs-tooltip-body',
|
||||
TOOLTIP_BODY_ITEM: 'chartjs-tooltip-body-item',
|
||||
TOOLTIP_HEADER: 'chartjs-tooltip-header',
|
||||
TOOLTIP_HEADER_ITEM: 'chartjs-tooltip-header-item'
|
||||
};
|
||||
const getOrCreateTooltip = chart => {
|
||||
let tooltipEl = chart.canvas.parentNode.querySelector('div');
|
||||
if (!tooltipEl) {
|
||||
tooltipEl = document.createElement('div');
|
||||
tooltipEl.classList.add(ClassName.TOOLTIP);
|
||||
const table = document.createElement('table');
|
||||
table.style.margin = '0px';
|
||||
tooltipEl.append(table);
|
||||
chart.canvas.parentNode.append(tooltipEl);
|
||||
}
|
||||
return tooltipEl;
|
||||
};
|
||||
const customTooltips = context => {
|
||||
// Tooltip Element
|
||||
const {
|
||||
chart,
|
||||
tooltip
|
||||
} = context;
|
||||
const tooltipEl = getOrCreateTooltip(chart);
|
||||
|
||||
// Hide if no tooltip
|
||||
if (tooltip.opacity === 0) {
|
||||
tooltipEl.style.opacity = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
// Set Text
|
||||
if (tooltip.body) {
|
||||
const titleLines = tooltip.title || [];
|
||||
const bodyLines = tooltip.body.map(b => b.lines);
|
||||
const tableHead = document.createElement('thead');
|
||||
tableHead.classList.add(ClassName.TOOLTIP_HEADER);
|
||||
for (const title of titleLines) {
|
||||
const tr = document.createElement('tr');
|
||||
tr.style.borderWidth = 0;
|
||||
tr.classList.add(ClassName.TOOLTIP_HEADER_ITEM);
|
||||
const th = document.createElement('th');
|
||||
th.style.borderWidth = 0;
|
||||
const text = document.createTextNode(title);
|
||||
th.append(text);
|
||||
tr.append(th);
|
||||
tableHead.append(tr);
|
||||
}
|
||||
const tableBody = document.createElement('tbody');
|
||||
tableBody.classList.add(ClassName.TOOLTIP_BODY);
|
||||
for (const [i, body] of bodyLines.entries()) {
|
||||
const colors = tooltip.labelColors[i];
|
||||
const span = document.createElement('span');
|
||||
span.style.background = colors.backgroundColor;
|
||||
span.style.borderColor = colors.borderColor;
|
||||
span.style.borderWidth = '2px';
|
||||
span.style.marginRight = '10px';
|
||||
span.style.height = '10px';
|
||||
span.style.width = '10px';
|
||||
span.style.display = 'inline-block';
|
||||
const tr = document.createElement('tr');
|
||||
tr.classList.add(ClassName.TOOLTIP_BODY_ITEM);
|
||||
const td = document.createElement('td');
|
||||
td.style.borderWidth = 0;
|
||||
const text = document.createTextNode(body);
|
||||
td.append(span);
|
||||
td.append(text);
|
||||
tr.append(td);
|
||||
tableBody.append(tr);
|
||||
}
|
||||
const tableRoot = tooltipEl.querySelector('table');
|
||||
|
||||
// Remove old children
|
||||
while (tableRoot.firstChild) {
|
||||
tableRoot.firstChild.remove();
|
||||
}
|
||||
|
||||
// Add new children
|
||||
tableRoot.append(tableHead);
|
||||
tableRoot.append(tableBody);
|
||||
}
|
||||
const {
|
||||
offsetLeft: positionX,
|
||||
offsetTop: positionY
|
||||
} = chart.canvas;
|
||||
|
||||
// Display, position, and set styles for font
|
||||
tooltipEl.style.opacity = 1;
|
||||
tooltipEl.style.left = `${positionX + tooltip.caretX}px`;
|
||||
tooltipEl.style.top = `${positionY + tooltip.caretY}px`;
|
||||
tooltipEl.style.font = tooltip.options.bodyFont.string;
|
||||
tooltipEl.style.padding = `${tooltip.padding}px ${tooltip.padding}px`;
|
||||
};
|
||||
|
||||
export { customTooltips };
|
||||
//# sourceMappingURL=coreui-chartjs.esm.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+7
@@ -0,0 +1,7 @@
|
||||
/*!
|
||||
* CoreUI v4.2.0 (https://coreui.io)
|
||||
* Copyright 2025 [object Object]
|
||||
* Licensed under MIT (https://github.com/coreui/coreui-chartjs/blob/main/LICENSE)
|
||||
*/
|
||||
const ClassName={TOOLTIP:"chartjs-tooltip",TOOLTIP_BODY:"chartjs-tooltip-body",TOOLTIP_BODY_ITEM:"chartjs-tooltip-body-item",TOOLTIP_HEADER:"chartjs-tooltip-header",TOOLTIP_HEADER_ITEM:"chartjs-tooltip-header-item"},getOrCreateTooltip=t=>{let e=t.canvas.parentNode.querySelector("div");if(!e){e=document.createElement("div"),e.classList.add(ClassName.TOOLTIP);const o=document.createElement("table");o.style.margin="0px",e.append(o),t.canvas.parentNode.append(e)}return e},customTooltips=t=>{const{chart:e,tooltip:o}=t,s=getOrCreateTooltip(e);if(0===o.opacity)return void(s.style.opacity=0);if(o.body){const t=o.title||[],e=o.body.map(t=>t.lines),a=document.createElement("thead");a.classList.add(ClassName.TOOLTIP_HEADER);for(const e of t){const t=document.createElement("tr");t.style.borderWidth=0,t.classList.add(ClassName.TOOLTIP_HEADER_ITEM);const o=document.createElement("th");o.style.borderWidth=0;const s=document.createTextNode(e);o.append(s),t.append(o),a.append(t)}const d=document.createElement("tbody");d.classList.add(ClassName.TOOLTIP_BODY);for(const[t,s]of e.entries()){const e=o.labelColors[t],a=document.createElement("span");a.style.background=e.backgroundColor,a.style.borderColor=e.borderColor,a.style.borderWidth="2px",a.style.marginRight="10px",a.style.height="10px",a.style.width="10px",a.style.display="inline-block";const n=document.createElement("tr");n.classList.add(ClassName.TOOLTIP_BODY_ITEM);const l=document.createElement("td");l.style.borderWidth=0;const r=document.createTextNode(s);l.append(a),l.append(r),n.append(l),d.append(n)}const n=s.querySelector("table");for(;n.firstChild;)n.firstChild.remove();n.append(a),n.append(d)}const{offsetLeft:a,offsetTop:d}=e.canvas;s.style.opacity=1,s.style.left=`${a+o.caretX}px`,s.style.top=`${d+o.caretY}px`,s.style.font=o.options.bodyFont.string,s.style.padding=`${o.padding}px ${o.padding}px`};export{customTooltips};
|
||||
//# sourceMappingURL=coreui-chartjs.esm.min.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+129
@@ -0,0 +1,129 @@
|
||||
/*!
|
||||
* CoreUI v4.2.0 (https://coreui.io)
|
||||
* Copyright 2025 [object Object]
|
||||
* Licensed under MIT (https://github.com/coreui/coreui-chartjs/blob/main/LICENSE)
|
||||
*/
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
|
||||
typeof define === 'function' && define.amd ? define(factory) :
|
||||
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, (global.coreui = global.coreui || {}, global.coreui.ChartJS = factory()));
|
||||
})(this, (function () { 'use strict';
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Custom Tooltips for Chart.js (v4.2.0): custom-tooltips.js
|
||||
* Licensed under MIT (https://github.com/coreui/coreui-chartjs/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const ClassName = {
|
||||
TOOLTIP: 'chartjs-tooltip',
|
||||
TOOLTIP_BODY: 'chartjs-tooltip-body',
|
||||
TOOLTIP_BODY_ITEM: 'chartjs-tooltip-body-item',
|
||||
TOOLTIP_HEADER: 'chartjs-tooltip-header',
|
||||
TOOLTIP_HEADER_ITEM: 'chartjs-tooltip-header-item'
|
||||
};
|
||||
const getOrCreateTooltip = chart => {
|
||||
let tooltipEl = chart.canvas.parentNode.querySelector('div');
|
||||
if (!tooltipEl) {
|
||||
tooltipEl = document.createElement('div');
|
||||
tooltipEl.classList.add(ClassName.TOOLTIP);
|
||||
const table = document.createElement('table');
|
||||
table.style.margin = '0px';
|
||||
tooltipEl.append(table);
|
||||
chart.canvas.parentNode.append(tooltipEl);
|
||||
}
|
||||
return tooltipEl;
|
||||
};
|
||||
const customTooltips = context => {
|
||||
// Tooltip Element
|
||||
const {
|
||||
chart,
|
||||
tooltip
|
||||
} = context;
|
||||
const tooltipEl = getOrCreateTooltip(chart);
|
||||
|
||||
// Hide if no tooltip
|
||||
if (tooltip.opacity === 0) {
|
||||
tooltipEl.style.opacity = 0;
|
||||
return;
|
||||
}
|
||||
|
||||
// Set Text
|
||||
if (tooltip.body) {
|
||||
const titleLines = tooltip.title || [];
|
||||
const bodyLines = tooltip.body.map(b => b.lines);
|
||||
const tableHead = document.createElement('thead');
|
||||
tableHead.classList.add(ClassName.TOOLTIP_HEADER);
|
||||
for (const title of titleLines) {
|
||||
const tr = document.createElement('tr');
|
||||
tr.style.borderWidth = 0;
|
||||
tr.classList.add(ClassName.TOOLTIP_HEADER_ITEM);
|
||||
const th = document.createElement('th');
|
||||
th.style.borderWidth = 0;
|
||||
const text = document.createTextNode(title);
|
||||
th.append(text);
|
||||
tr.append(th);
|
||||
tableHead.append(tr);
|
||||
}
|
||||
const tableBody = document.createElement('tbody');
|
||||
tableBody.classList.add(ClassName.TOOLTIP_BODY);
|
||||
for (const [i, body] of bodyLines.entries()) {
|
||||
const colors = tooltip.labelColors[i];
|
||||
const span = document.createElement('span');
|
||||
span.style.background = colors.backgroundColor;
|
||||
span.style.borderColor = colors.borderColor;
|
||||
span.style.borderWidth = '2px';
|
||||
span.style.marginRight = '10px';
|
||||
span.style.height = '10px';
|
||||
span.style.width = '10px';
|
||||
span.style.display = 'inline-block';
|
||||
const tr = document.createElement('tr');
|
||||
tr.classList.add(ClassName.TOOLTIP_BODY_ITEM);
|
||||
const td = document.createElement('td');
|
||||
td.style.borderWidth = 0;
|
||||
const text = document.createTextNode(body);
|
||||
td.append(span);
|
||||
td.append(text);
|
||||
tr.append(td);
|
||||
tableBody.append(tr);
|
||||
}
|
||||
const tableRoot = tooltipEl.querySelector('table');
|
||||
|
||||
// Remove old children
|
||||
while (tableRoot.firstChild) {
|
||||
tableRoot.firstChild.remove();
|
||||
}
|
||||
|
||||
// Add new children
|
||||
tableRoot.append(tableHead);
|
||||
tableRoot.append(tableBody);
|
||||
}
|
||||
const {
|
||||
offsetLeft: positionX,
|
||||
offsetTop: positionY
|
||||
} = chart.canvas;
|
||||
|
||||
// Display, position, and set styles for font
|
||||
tooltipEl.style.opacity = 1;
|
||||
tooltipEl.style.left = `${positionX + tooltip.caretX}px`;
|
||||
tooltipEl.style.top = `${positionY + tooltip.caretY}px`;
|
||||
tooltipEl.style.font = tooltip.options.bodyFont.string;
|
||||
tooltipEl.style.padding = `${tooltip.padding}px ${tooltip.padding}px`;
|
||||
};
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Custom Tooltips for Chart.js (v4.1.0): index.umd.js
|
||||
* Licensed under MIT (https://github.com/coreui/coreui-chartjs/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const index_umd = {
|
||||
customTooltips
|
||||
};
|
||||
|
||||
return index_umd;
|
||||
|
||||
}));
|
||||
//# sourceMappingURL=coreui-chartjs.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+7
@@ -0,0 +1,7 @@
|
||||
/*!
|
||||
* CoreUI v4.2.0 (https://coreui.io)
|
||||
* Copyright 2025 [object Object]
|
||||
* Licensed under MIT (https://github.com/coreui/coreui-chartjs/blob/main/LICENSE)
|
||||
*/
|
||||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):((e="undefined"!=typeof globalThis?globalThis:e||self).coreui=e.coreui||{},e.coreui.ChartJS=t())}(this,function(){"use strict";const e="chartjs-tooltip",t="chartjs-tooltip-body",o="chartjs-tooltip-body-item",n="chartjs-tooltip-header",d="chartjs-tooltip-header-item";return{customTooltips:s=>{const{chart:a,tooltip:c}=s,r=(t=>{let o=t.canvas.parentNode.querySelector("div");if(!o){o=document.createElement("div"),o.classList.add(e);const n=document.createElement("table");n.style.margin="0px",o.append(n),t.canvas.parentNode.append(o)}return o})(a);if(0===c.opacity)return void(r.style.opacity=0);if(c.body){const e=c.title||[],s=c.body.map(e=>e.lines),a=document.createElement("thead");a.classList.add(n);for(const t of e){const e=document.createElement("tr");e.style.borderWidth=0,e.classList.add(d);const o=document.createElement("th");o.style.borderWidth=0;const n=document.createTextNode(t);o.append(n),e.append(o),a.append(e)}const l=document.createElement("tbody");l.classList.add(t);for(const[e,t]of s.entries()){const n=c.labelColors[e],d=document.createElement("span");d.style.background=n.backgroundColor,d.style.borderColor=n.borderColor,d.style.borderWidth="2px",d.style.marginRight="10px",d.style.height="10px",d.style.width="10px",d.style.display="inline-block";const s=document.createElement("tr");s.classList.add(o);const a=document.createElement("td");a.style.borderWidth=0;const r=document.createTextNode(t);a.append(d),a.append(r),s.append(a),l.append(s)}const i=r.querySelector("table");for(;i.firstChild;)i.firstChild.remove();i.append(a),i.append(l)}const{offsetLeft:l,offsetTop:i}=a.canvas;r.style.opacity=1,r.style.left=`${l+c.caretX}px`,r.style.top=`${i+c.caretY}px`,r.style.font=c.options.bodyFont.string,r.style.padding=`${c.padding}px ${c.padding}px`}}});
|
||||
//# sourceMappingURL=coreui-chartjs.min.js.map
|
||||
+1
File diff suppressed because one or more lines are too long
+2
@@ -0,0 +1,2 @@
|
||||
|
||||
export declare const customTooltips: (context: any) => void
|
||||
+8
@@ -0,0 +1,8 @@
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Custom Tooltips for Chart.js (v4.1.0): index.esm.js
|
||||
* Licensed under MIT (https://github.com/coreui/coreui-chartjs/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
export { default as customTooltips } from './src/custom-tooltips.js'
|
||||
+12
@@ -0,0 +1,12 @@
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Custom Tooltips for Chart.js (v4.1.0): index.umd.js
|
||||
* Licensed under MIT (https://github.com/coreui/coreui-chartjs/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
import customTooltips from './src/custom-tooltips.js'
|
||||
|
||||
export default {
|
||||
customTooltips
|
||||
}
|
||||
+117
@@ -0,0 +1,117 @@
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Custom Tooltips for Chart.js (v4.2.0): custom-tooltips.js
|
||||
* Licensed under MIT (https://github.com/coreui/coreui-chartjs/blob/main/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const ClassName = {
|
||||
TOOLTIP: 'chartjs-tooltip',
|
||||
TOOLTIP_BODY: 'chartjs-tooltip-body',
|
||||
TOOLTIP_BODY_ITEM: 'chartjs-tooltip-body-item',
|
||||
TOOLTIP_HEADER: 'chartjs-tooltip-header',
|
||||
TOOLTIP_HEADER_ITEM: 'chartjs-tooltip-header-item'
|
||||
}
|
||||
|
||||
const getOrCreateTooltip = chart => {
|
||||
let tooltipEl = chart.canvas.parentNode.querySelector('div')
|
||||
|
||||
if (!tooltipEl) {
|
||||
tooltipEl = document.createElement('div')
|
||||
tooltipEl.classList.add(ClassName.TOOLTIP)
|
||||
|
||||
const table = document.createElement('table')
|
||||
table.style.margin = '0px'
|
||||
|
||||
tooltipEl.append(table)
|
||||
chart.canvas.parentNode.append(tooltipEl)
|
||||
}
|
||||
|
||||
return tooltipEl
|
||||
}
|
||||
|
||||
const customTooltips = context => {
|
||||
// Tooltip Element
|
||||
const { chart, tooltip } = context
|
||||
const tooltipEl = getOrCreateTooltip(chart)
|
||||
|
||||
// Hide if no tooltip
|
||||
if (tooltip.opacity === 0) {
|
||||
tooltipEl.style.opacity = 0
|
||||
return
|
||||
}
|
||||
|
||||
// Set Text
|
||||
if (tooltip.body) {
|
||||
const titleLines = tooltip.title || []
|
||||
const bodyLines = tooltip.body.map(b => b.lines)
|
||||
|
||||
const tableHead = document.createElement('thead')
|
||||
tableHead.classList.add(ClassName.TOOLTIP_HEADER)
|
||||
|
||||
for (const title of titleLines) {
|
||||
const tr = document.createElement('tr')
|
||||
tr.style.borderWidth = 0
|
||||
tr.classList.add(ClassName.TOOLTIP_HEADER_ITEM)
|
||||
|
||||
const th = document.createElement('th')
|
||||
th.style.borderWidth = 0
|
||||
const text = document.createTextNode(title)
|
||||
|
||||
th.append(text)
|
||||
tr.append(th)
|
||||
tableHead.append(tr)
|
||||
}
|
||||
|
||||
const tableBody = document.createElement('tbody')
|
||||
tableBody.classList.add(ClassName.TOOLTIP_BODY)
|
||||
|
||||
for (const [i, body] of bodyLines.entries()) {
|
||||
const colors = tooltip.labelColors[i]
|
||||
|
||||
const span = document.createElement('span')
|
||||
span.style.background = colors.backgroundColor
|
||||
span.style.borderColor = colors.borderColor
|
||||
span.style.borderWidth = '2px'
|
||||
span.style.marginRight = '10px'
|
||||
span.style.height = '10px'
|
||||
span.style.width = '10px'
|
||||
span.style.display = 'inline-block'
|
||||
|
||||
const tr = document.createElement('tr')
|
||||
tr.classList.add(ClassName.TOOLTIP_BODY_ITEM)
|
||||
|
||||
const td = document.createElement('td')
|
||||
td.style.borderWidth = 0
|
||||
|
||||
const text = document.createTextNode(body)
|
||||
|
||||
td.append(span)
|
||||
td.append(text)
|
||||
tr.append(td)
|
||||
tableBody.append(tr)
|
||||
}
|
||||
|
||||
const tableRoot = tooltipEl.querySelector('table')
|
||||
|
||||
// Remove old children
|
||||
while (tableRoot.firstChild) {
|
||||
tableRoot.firstChild.remove()
|
||||
}
|
||||
|
||||
// Add new children
|
||||
tableRoot.append(tableHead)
|
||||
tableRoot.append(tableBody)
|
||||
}
|
||||
|
||||
const { offsetLeft: positionX, offsetTop: positionY } = chart.canvas
|
||||
|
||||
// Display, position, and set styles for font
|
||||
tooltipEl.style.opacity = 1
|
||||
tooltipEl.style.left = `${positionX + tooltip.caretX}px`
|
||||
tooltipEl.style.top = `${positionY + tooltip.caretY}px`
|
||||
tooltipEl.style.font = tooltip.options.bodyFont.string
|
||||
tooltipEl.style.padding = `${tooltip.padding}px ${tooltip.padding}px`
|
||||
}
|
||||
|
||||
export default customTooltips
|
||||
+102
@@ -0,0 +1,102 @@
|
||||
{
|
||||
"name": "@coreui/chartjs",
|
||||
"version": "4.2.0",
|
||||
"description": "Chart.js for CoreUI",
|
||||
"keywords": [
|
||||
"chart",
|
||||
"chart.js",
|
||||
"coreui",
|
||||
"tooltips"
|
||||
],
|
||||
"homepage": "https://coreui.io",
|
||||
"bugs": {
|
||||
"url": "https://github.com/coreui/coreui-chartjs/issues",
|
||||
"email": "support@coreui.io"
|
||||
},
|
||||
"license": "MIT",
|
||||
"author": {
|
||||
"name": "creativeLabs Łukasz Holeczek",
|
||||
"url": "https://coreui.io",
|
||||
"github": "https://github.com/coreui",
|
||||
"twitter": "https://twitter.com/core_ui"
|
||||
},
|
||||
"contributors": [
|
||||
{
|
||||
"name": "CoreUI Core Team",
|
||||
"url": "https://github.com/orgs/coreui/people"
|
||||
}
|
||||
],
|
||||
"files": [
|
||||
"dist/",
|
||||
"js/",
|
||||
"scss/"
|
||||
],
|
||||
"style": "dist/css/coreui-chartjs.css",
|
||||
"sass": "scss/coreui-chartjs.scss",
|
||||
"main": "dist/js/coreui-chartjs.js",
|
||||
"module": "dist/js/coreui-chartjs.esm.js",
|
||||
"types": "js/index.d.ts",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/coreui/coreui-chartjs.git"
|
||||
},
|
||||
"scripts": {
|
||||
"css": "npm-run-all css-compile css-prefix css-minify",
|
||||
"css-compile": "sass --style expanded --source-map --embed-sources --no-error-css --load-path=node_modules/ scss/:dist/css/",
|
||||
"css-lint": "npm-run-all --continue-on-error --parallel css-lint-*",
|
||||
"css-lint-stylelint": "stylelint \"**/*.{css,scss}\" --cache --cache-location .cache/.stylelintcache --rd",
|
||||
"css-lint-vars": "fusv scss/ docs/assets/scss/",
|
||||
"css-minify": "npm-run-all --parallel css-minify-*",
|
||||
"css-minify-main": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\"",
|
||||
"css-prefix": "npm-run-all --parallel css-prefix-*",
|
||||
"css-prefix-main": "postcss --config build/postcss.config.mjs --replace \"dist/css/*.css\" \"!dist/css/*.rtl*.css\" \"!dist/css/*.min.css\"",
|
||||
"js": "npm-run-all js-compile js-minify",
|
||||
"js-compile": "npm-run-all --parallel js-compile-*",
|
||||
"js-compile-standalone": "rollup --environment BUNDLE:false --config build/rollup.config.mjs --sourcemap",
|
||||
"js-compile-standalone-esm": "rollup --environment ESM:true,BUNDLE:false --config build/rollup.config.mjs --sourcemap",
|
||||
"js-lint": "eslint --cache --cache-location .cache/.eslintcache --report-unused-disable-directives",
|
||||
"js-minify": "npm-run-all --parallel js-minify-*",
|
||||
"js-minify-standalone": "terser --compress --mangle --comments \"/^!/\" --source-map \"content=dist/js/coreui-chartjs.js.map,includeSources,url=coreui-chartjs.min.js.map\" --output dist/js/coreui-chartjs.min.js dist/js/coreui-chartjs.js",
|
||||
"js-minify-standalone-esm": "terser --compress --mangle --comments \"/^!/\" --source-map \"content=dist/js/coreui-chartjs.esm.js.map,includeSources,url=coreui-chartjs.esm.min.js.map\" --output dist/js/coreui-chartjs.esm.min.js dist/js/coreui-chartjs.esm.js",
|
||||
"dist": "npm-run-all --parallel css js",
|
||||
"release": "npm-run-all dist release-zip*",
|
||||
"release-version": "node build/change-version.mjs",
|
||||
"release-zip": "cross-env-shell \"rm -rf coreui-$npm_package_version-dist && cp -r dist/ coreui-$npm_package_version-dist && zip -r9 coreui-$npm_package_version-dist.zip coreui-$npm_package_version-dist && rm -rf coreui-$npm_package_version-dist\"",
|
||||
"watch-js": "nodemon --ignore dist/ -e js -x npm run js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@coreui/coreui": "^5.5.0",
|
||||
"chart.js": "^4.5.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.28.3",
|
||||
"@babel/core": "^7.28.5",
|
||||
"@babel/preset-env": "^7.28.5",
|
||||
"@rollup/plugin-babel": "^6.1.0",
|
||||
"@rollup/plugin-commonjs": "^29.0.0",
|
||||
"@rollup/plugin-node-resolve": "^16.0.3",
|
||||
"@rollup/plugin-replace": "^6.0.3",
|
||||
"autoprefixer": "^10.4.23",
|
||||
"clean-css-cli": "^5.6.3",
|
||||
"cross-env": "^10.1.0",
|
||||
"eslint": "^9.39.2",
|
||||
"eslint-config-xo": "^0.49.0",
|
||||
"eslint-plugin-import": "^2.32.0",
|
||||
"eslint-plugin-unicorn": "^62.0.0",
|
||||
"find-unused-sass-variables": "^6.1.1",
|
||||
"globals": "^16.5.0",
|
||||
"globby": "^16.0.0",
|
||||
"lockfile-lint": "^4.14.1",
|
||||
"nodemon": "^3.1.11",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"postcss": "^8.5.6",
|
||||
"postcss-cli": "^11.0.1",
|
||||
"rollup": "^4.54.0",
|
||||
"rollup-plugin-istanbul": "^5.0.0",
|
||||
"sass": "^1.97.1",
|
||||
"shelljs": "^0.10.0",
|
||||
"stylelint": "^16.26.1",
|
||||
"stylelint-config-twbs-bootstrap": "^16.1.0",
|
||||
"terser": "5.44.1"
|
||||
}
|
||||
}
|
||||
+52
@@ -0,0 +1,52 @@
|
||||
@use "@coreui/coreui/scss/mixins/border-radius" as *;
|
||||
@use "@coreui/coreui/scss/mixins/transition" as *;
|
||||
@use "@coreui/coreui/scss/variables" as *;
|
||||
@use "variables" as *;
|
||||
|
||||
//
|
||||
// Chart.js custom tooltips
|
||||
//
|
||||
|
||||
.chartjs-tooltip {
|
||||
// scss-docs-start chartjs-tooltip-css-vars
|
||||
--#{$prefix}chartjs-tooltip-zindex: #{$chartjs-tooltip-zindex};
|
||||
--#{$prefix}chartjs-tooltip-padding-x: #{$chartjs-tooltip-padding-x};
|
||||
--#{$prefix}chartjs-tooltip-padding-y: #{$chartjs-tooltip-padding-y};
|
||||
--#{$prefix}chartjs-tooltip-color: #{$chartjs-tooltip-color};
|
||||
--#{$prefix}chartjs-tooltip-bg: #{$chartjs-tooltip-bg};
|
||||
--#{$prefix}chartjs-tooltip-border-radius: #{$chartjs-tooltip-border-radius};
|
||||
--#{$prefix}chartjs-tooltip-transition: #{$chartjs-tooltip-transition};
|
||||
--#{$prefix}chartjs-tooltip-header-margin: #{$chartjs-tooltip-header-margin};
|
||||
--#{$prefix}chartjs-tooltip-header-font-size: #{$chartjs-tooltip-header-font-size};
|
||||
--#{$prefix}chartjs-tooltip-header-font-weight: #{$chartjs-tooltip-header-font-weight};
|
||||
--#{$prefix}chartjs-tooltip-body-font-size: #{$chartjs-tooltip-body-font-size};
|
||||
--#{$prefix}chartjs-tooltip-body-font-weight: #{$chartjs-tooltip-body-font-weight};
|
||||
// scss-docs-end chartjs-tooltip-css-vars
|
||||
|
||||
position: absolute;
|
||||
z-index: var(--#{$prefix}chartjs-tooltip-zindex);
|
||||
padding: var(--#{$prefix}chartjs-tooltip-padding-y) var(--#{$prefix}chartjs-tooltip-padding-x);
|
||||
color: var(--#{$prefix}chartjs-tooltip-color);
|
||||
pointer-events: none;
|
||||
background: var(--#{$prefix}chartjs-tooltip-bg);
|
||||
opacity: 0;
|
||||
transform: translate(-50%, 0);
|
||||
@include border-radius(var(--#{$prefix}chartjs-tooltip-border-radius));
|
||||
@include transition(var(--#{$prefix}chartjs-tooltip-transition));
|
||||
}
|
||||
|
||||
.chartjs-tooltip-header {
|
||||
margin-bottom: var(--#{$prefix}chartjs-tooltip-header-margin);
|
||||
}
|
||||
|
||||
.chartjs-tooltip-header-item {
|
||||
font-size: var(--#{$prefix}chartjs-tooltip-header-font-size);
|
||||
font-weight: var(--#{$prefix}chartjs-tooltip-header-font-weight);
|
||||
}
|
||||
|
||||
.chartjs-tooltip-body-item {
|
||||
align-items: center;
|
||||
font-size: var(--#{$prefix}chartjs-tooltip-body-font-size);
|
||||
font-weight: var(--#{$prefix}chartjs-tooltip-body-font-weight);
|
||||
white-space: nowrap;
|
||||
}
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
@use "@coreui/coreui/scss/variables" as *;
|
||||
|
||||
$chartjs-tooltip-zindex: $zindex-tooltip !default;
|
||||
$chartjs-tooltip-color: var(--#{$prefix}body-bg) !default;
|
||||
$chartjs-tooltip-bg: rgba(var(--#{$prefix}emphasis-color-rgb), .8) !default;
|
||||
$chartjs-tooltip-border-radius: var(--#{$prefix}border-radius) !default;
|
||||
$chartjs-tooltip-padding-y: $spacer * .25 !default;
|
||||
$chartjs-tooltip-padding-x: $spacer * .5 !default;
|
||||
$chartjs-tooltip-transition: all .15s ease !default;
|
||||
$chartjs-tooltip-header-margin: $spacer * .5 !default;
|
||||
$chartjs-tooltip-header-font-size: $font-size-sm !default;
|
||||
$chartjs-tooltip-header-font-weight: $font-weight-bold !default;
|
||||
$chartjs-tooltip-body-font-size: $font-size-sm !default;
|
||||
$chartjs-tooltip-body-font-weight: $font-weight-normal !default;
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
/*!
|
||||
* CoreUI Plugins - Chart.js for CoreUI 5.x
|
||||
* @version v4.2.0
|
||||
* @link https://coreui.io
|
||||
* Copyright (c) 2025 creativeLabs Łukasz Holeczek
|
||||
* Licensed under MIT (https://github.com/coreui/coreui-chartjs/blob/main/LICENSE)
|
||||
*/
|
||||
|
||||
@forward "tooltips";
|
||||
Reference in New Issue
Block a user