Skip to content

Commit

Permalink
Update darkmode options and add new method (#1826)
Browse files Browse the repository at this point in the history
  • Loading branch information
@juujisai
juujisai authored Jul 26, 2023
1 parent 2c7108b commit 117e3e9
Show file tree
Hide file tree
Showing 4 changed files with 250 additions and 10 deletions.
3 changes: 3 additions & 0 deletions site/content/docs/standard/data/charts/a-ss.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@
<li class="mb-1 pl-[9px] text-[0.85rem]">
<a href="#api-section-options">Options</a>
</li>
<li class="mb-1 pl-[19px] text-[0.85rem]">
<a href="#options-darkmode">Darkmode</a>
</li>
<li class="mb-1 pl-[19px] text-[0.85rem]">
<a href="#options-line">Line chart</a>
</li>
Expand Down
231 changes: 223 additions & 8 deletions site/content/docs/standard/data/charts/a.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<section id="api-section-import">
<!--Title-->
<h2
class="mt-0 mb-5 text-3xl font-semibold leading-normal text-gray-800 dark:text-gray-200"
class="mb-5 mt-0 text-3xl font-semibold leading-normal text-gray-800 dark:text-gray-200"
id="import"
data-te-spy-item>
Import
Expand Down Expand Up @@ -47,7 +47,7 @@
<section id="api-section-usage">
<!--Title-->
<h2
class="mt-0 mb-5 text-3xl font-semibold leading-normal"
class="mb-5 mt-0 text-3xl font-semibold leading-normal"
id="usage"
data-te-spy-item>
Usage
Expand Down Expand Up @@ -300,14 +300,208 @@ <h4 class="mb-4 font-bold">Via JavaScript</h4>
<section id="api-section-options">
<!-- Section title -->
<h2
class="mt-0 mb-5 text-3xl font-semibold leading-normal"
class="mb-5 mt-0 text-3xl font-semibold leading-normal"
id="options"
data-te-spy-item>
Options
</h2>

<h3
class="mt-0 mb-5 text-2xl font-semibold leading-normal"
class="mb-5 mt-0 text-2xl font-semibold leading-normal"
id="options-darkmode"
data-te-spy-item>
Darkmode options
</h3>

<p class="mb-4">
Those options allows to change the default darkmode settings. You can use
them with data attributes aswell, for example:
<code>data-te-dark-ticks-color="#f00"</code>
</p>

<div class="flex flex-col">
<div class="overflow-x-auto">
<div class="inline-block min-w-full py-2">
<div class="overflow-hidden">
<table
class="min-w-full border text-left text-sm font-light text-gray-900 dark:border-neutral-500 dark:text-gray-100">
<thead
class="border-b bg-white font-medium dark:border-neutral-500 dark:bg-neutral-600">
<tr>
<th
scope="col"
class="border-r px-6 py-4 dark:border-neutral-500">
Name
</th>
<th
scope="col"
class="border-r px-6 py-4 dark:border-neutral-500">
Type
</th>
<th
scope="col"
class="border-r px-6 py-4 dark:border-neutral-500">
Default
</th>
<th scope="col" class="px-6 py-4">Description</th>
</tr>
</thead>
<tbody>
<tr
class="border-b dark:border-neutral-500 [&:nth-child(even)]:bg-white dark:[&:nth-child(even)]:bg-neutral-600 [&:nth-child(odd)]:bg-gray-100 dark:[&:nth-child(odd)]:bg-neutral-700">
<td
class="border-r px-6 py-4 font-medium dark:border-neutral-500">
<code class="text-red-500 dark:text-red-300"
>darkTicksColor</code
>
</td>
<td
class="border-r px-6 py-4 dark:border-neutral-500 max-lg:whitespace-nowrap">
String
</td>
<td
class="border-r px-6 py-4 dark:border-neutral-500 max-lg:whitespace-nowrap">
<code class="text-red-500 dark:text-red-300">"#fff"</code>
</td>
<td class="px-6 py-4 max-lg:whitespace-nowrap">
Color for ticks in dark mode
</td>
</tr>
<tr
class="border-b dark:border-neutral-500 [&:nth-child(even)]:bg-white dark:[&:nth-child(even)]:bg-neutral-600 [&:nth-child(odd)]:bg-gray-100 dark:[&:nth-child(odd)]:bg-neutral-700">
<td
class="border-r px-6 py-4 font-medium dark:border-neutral-500">
<code class="text-red-500 dark:text-red-300"
>darkLabelColor</code
>
</td>
<td
class="border-r px-6 py-4 dark:border-neutral-500 max-lg:whitespace-nowrap">
String
</td>
<td
class="border-r px-6 py-4 dark:border-neutral-500 max-lg:whitespace-nowrap">
<code class="text-red-500 dark:text-red-300">"#fff"</code>
</td>
<td class="px-6 py-4 max-lg:whitespace-nowrap">
Color for label in dark mode
</td>
</tr>
<tr
class="border-b dark:border-neutral-500 [&:nth-child(even)]:bg-white dark:[&:nth-child(even)]:bg-neutral-600 [&:nth-child(odd)]:bg-gray-100 dark:[&:nth-child(odd)]:bg-neutral-700">
<td
class="border-r px-6 py-4 font-medium dark:border-neutral-500">
<code class="text-red-500 dark:text-red-300"
>darkGridLinesColor</code
>
</td>
<td
class="border-r px-6 py-4 dark:border-neutral-500 max-lg:whitespace-nowrap">
String
</td>
<td
class="border-r px-6 py-4 dark:border-neutral-500 max-lg:whitespace-nowrap">
<code class="text-red-500 dark:text-red-300">"#555"</code>
</td>
<td class="px-6 py-4 max-lg:whitespace-nowrap">
Color for grid lines in dark mode
</td>
</tr>
<tr
class="border-b dark:border-neutral-500 [&:nth-child(even)]:bg-white dark:[&:nth-child(even)]:bg-neutral-600 [&:nth-child(odd)]:bg-gray-100 dark:[&:nth-child(odd)]:bg-neutral-700">
<td
class="border-r px-6 py-4 font-medium dark:border-neutral-500">
<code class="text-red-500 dark:text-red-300"
>darkmodeOff</code
>
</td>
<td
class="border-r px-6 py-4 dark:border-neutral-500 max-lg:whitespace-nowrap">
string / null
</td>
<td
class="border-r px-6 py-4 dark:border-neutral-500 max-lg:whitespace-nowrap">
<code class="text-red-500 dark:text-red-300"
>"undefined"</code
>
</td>
<td class="px-6 py-4 max-lg:whitespace-nowrap">
Add only when you want to turn off darkmode. Example: simply
add: <code>data-te-darkmode-off></code> to the canvas
element or <code>darkmodeOff: null"</code> via JS
</td>
</tr>
<tr
class="border-b dark:border-neutral-500 [&:nth-child(even)]:bg-white dark:[&:nth-child(even)]:bg-neutral-600 [&:nth-child(odd)]:bg-gray-100 dark:[&:nth-child(odd)]:bg-neutral-700">
<td
class="border-r px-6 py-4 font-medium dark:border-neutral-500">
<code class="text-red-500 dark:text-red-300">darkMode</code>
</td>
<td
class="border-r px-6 py-4 dark:border-neutral-500 max-lg:whitespace-nowrap">
"dark" | "light" | null
</td>
<td
class="border-r px-6 py-4 dark:border-neutral-500 max-lg:whitespace-nowrap">
<code class="text-red-500 dark:text-red-300">null</code>
</td>
<td class="px-6 py-4 max-lg:whitespace-nowrap">
Set the darkmode value on init. By default it's set to null,
so the mode will depend on the localStorage and
<code>.dark</code> class in HTML element
</td>
</tr>
<tr
class="border-b dark:border-neutral-500 [&:nth-child(even)]:bg-white dark:[&:nth-child(even)]:bg-neutral-600 [&:nth-child(odd)]:bg-gray-100 dark:[&:nth-child(odd)]:bg-neutral-700">
<td
class="border-r px-6 py-4 font-medium dark:border-neutral-500">
<code class="text-red-500 dark:text-red-300"
>darkBgColorLight</code
>
</td>
<td
class="border-r px-6 py-4 dark:border-neutral-500 max-lg:whitespace-nowrap">
string
</td>
<td
class="border-r px-6 py-4 dark:border-neutral-500 max-lg:whitespace-nowrap">
<code class="text-red-500 dark:text-red-300">"#fff"</code>
</td>
<td class="px-6 py-4 max-lg:whitespace-nowrap">
Default background color charts in lightmode
</td>
</tr>
<tr
class="border-b dark:border-neutral-500 [&:nth-child(even)]:bg-white dark:[&:nth-child(even)]:bg-neutral-600 [&:nth-child(odd)]:bg-gray-100 dark:[&:nth-child(odd)]:bg-neutral-700">
<td
class="border-r px-6 py-4 font-medium dark:border-neutral-500">
<code class="text-red-500 dark:text-red-300"
>darkBgColor</code
>
</td>
<td
class="border-r px-6 py-4 dark:border-neutral-500 max-lg:whitespace-nowrap">
string
</td>
<td
class="border-r px-6 py-4 dark:border-neutral-500 max-lg:whitespace-nowrap">
<code class="text-red-500 dark:text-red-300"
>"#262626"</code
>
</td>
<td class="px-6 py-4 max-lg:whitespace-nowrap">
Default background color charts
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>

<h3
class="my-5 text-2xl font-semibold leading-normal"
id="options-line"
data-te-spy-item>
Line options
Expand Down Expand Up @@ -2310,14 +2504,14 @@ <h4 class="mb-4 font-bold">Via JavaScript</h4>
<section id="api-section-methods">
<!-- Section title -->
<h2
class="mt-0 mb-5 text-3xl font-semibold leading-normal"
class="mb-5 mt-0 text-3xl font-semibold leading-normal"
id="methods"
data-te-spy-item>
Methods
</h2>

<div
class="my-6 rounded-lg bg-red-100 py-5 px-6 text-base text-red-700"
class="my-6 rounded-lg bg-red-100 px-6 py-5 text-base text-red-700"
role="alert">
<p class="mb-2">
<strong>Asynchronous methods and transitions:</strong>
Expand Down Expand Up @@ -2367,7 +2561,7 @@ <h4 class="mb-4 font-bold">Via JavaScript</h4>
<a
href="https://www.chartjs.org/docs/3.7.1/developers/api.html#update-mode"
target="_blank"
>.update(mode?)</a
>.update</a
>
method. In this method passing <code>data</code> is
required, second argument is optional.
Expand All @@ -2378,6 +2572,27 @@ <h4 class="mb-4 font-bold">Via JavaScript</h4>
>
</td>
</tr>
<tr
class="border-b dark:border-neutral-500 [&:nth-child(even)]:bg-white dark:[&:nth-child(even)]:bg-neutral-600 [&:nth-child(odd)]:bg-gray-100 dark:[&:nth-child(odd)]:bg-neutral-700">
<td
class="border-r px-6 py-4 dark:border-neutral-500 max-lg:whitespace-nowrap">
<code class="text-red-500 dark:text-red-300"
>setTheme(mode)</code
>
</td>
<td
class="border-r px-6 py-4 dark:border-neutral-500 max-lg:whitespace-nowrap">
Sets the dark or light theme for the chart. Pass
<code>'dark'</code> or <code>'light'</code> as a parameter.
This method will work only when the chart is already fully
loaded
</td>
<td class="px-6 py-4 max-lg:whitespace-nowrap">
<code class="text-red-500 dark:text-red-300"
>myChart.setTheme("dark")</code
>
</td>
</tr>
<tr
class="border-b dark:border-neutral-500 [&:nth-child(even)]:bg-white dark:[&:nth-child(even)]:bg-neutral-600 [&:nth-child(odd)]:bg-gray-100 dark:[&:nth-child(odd)]:bg-neutral-700">
<td
Expand Down Expand Up @@ -2472,7 +2687,7 @@ <h4 class="mb-4 font-bold">Via JavaScript</h4>
<section id="api-section-events">
<!-- Section title -->
<h2
class="mt-0 mb-5 text-3xl font-semibold leading-normal"
class="mb-5 mt-0 text-3xl font-semibold leading-normal"
id="events"
data-te-spy-item>
Events
Expand Down
3 changes: 3 additions & 0 deletions site/content/docs/standard/data/charts/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2143,6 +2143,9 @@
<li class="ml-8">
<code>data-te-darkmode-off</code> - removes darkmode color change
</li>
<li class="ml-8">
<code>data-te-dark-mode</code> - allows to change the dark mode on init
</li>
</ul>

<!--Section: Demo-->
Expand Down
23 changes: 21 additions & 2 deletions src/js/data/chart/charts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,9 @@ const DEFAULT_DARK_OPTIONS = {
darkLabelColor: "#fff",
darkGridLinesColor: "#555",
darkmodeOff: "undefined",
darkMode: null,
darkBgColor: "#262626",
darkBgColorLight: "#fff",
options: null,
};

Expand All @@ -61,7 +63,9 @@ const DARK_OPTIONS_TYPE = {
darkLabelColor: "string",
darkGridLinesColor: "string",
darkmodeOff: "(string|null)",
darkMode: "(string|null)",
darkBgColor: "string",
darkBgColorLight: "string",
options: "(object|null)",
};

Expand Down Expand Up @@ -164,7 +168,13 @@ class Chart {

if (this._darkOptions.darkmodeOff !== null) {
// check mode on start
this._handleMode(this.systemColorMode);
const mode =
this._darkOptions.darkMode === "dark"
? "dark"
: this._darkOptions.darkMode === "light"
? "light"
: this.systemColorMode;
this._handleMode(mode);
// observe darkmode class container change
this._observer = new MutationObserver(this._observerCallback.bind(this));
this._observer.observe(this._darkModeClassContainer, {
Expand Down Expand Up @@ -218,6 +228,13 @@ class Chart {
this._chart.update();
}

setTheme(theme) {
if ((theme !== "dark" && theme !== "light") || !this._data) {
return;
}
this._handleMode(theme);
}

// Private
_getDarkConfig(config) {
let dataAttributes = {};
Expand Down Expand Up @@ -350,7 +367,9 @@ class Chart {
[...this._data.data.datasets].forEach(
(set) =>
["pie", "doughnut", "polarArea"].includes(this._type) &&
(set.borderColor = dark ? this._darkOptions.darkBgColor : "#fff")
(set.borderColor = dark
? this._darkOptions.darkBgColor
: this._darkOptions.darkBgColorLight)
);
}

Expand Down

0 comments on commit 117e3e9

Please sign in to comment.