13616-Fix text color chartjs with dark theme

This commit is contained in:
Pablo Aragon 2024-04-22 15:31:37 +02:00
parent b12a9bfbad
commit a75af90a6e
4 changed files with 69 additions and 5 deletions

View File

@ -547,6 +547,7 @@ function line_graph(
function get_build_setup_charts($type, $options, $data)
{
global $config;
$user_info = get_user_info($config['id_user']);
$factory = new Factory();
@ -1294,6 +1295,10 @@ function get_build_setup_charts($type, $options, $data)
}
}
if (isset($user_info['id_skin']) === true) {
$chart->options()->setTheme($user_info['id_skin']);
}
// Add Datasets.
$setData = $chart->createDataSet();
switch ($type) {

View File

@ -2094,3 +2094,7 @@ select option:checked {
#horizontalBar > .labels > .label > div[style^="background"] {
filter: invert(1);
}
.color_666 {
color: var(--text-color);
}

View File

@ -92,6 +92,11 @@ class Options implements ChartOwnedInterface, ArraySerializableInterface, JsonSe
*/
protected $indexAxis;
/**
* @var string
*/
protected $theme;
/**
* @return Layout
@ -194,7 +199,7 @@ class Options implements ChartOwnedInterface, ArraySerializableInterface, JsonSe
/**
* @return bool
* @return boolean
*/
public function disableAnimation()
{
@ -323,6 +328,32 @@ class Options implements ChartOwnedInterface, ArraySerializableInterface, JsonSe
}
/**
* Get font color.
*
* @return string
*/
public function getTheme()
{
return $this->theme;
}
/**
* Set font color.
*
* @param string $Theme Global font color.
*
* @return $this
*/
public function setTheme($theme)
{
$this->theme = $theme;
return $this;
}
/**
* @return array
*/

View File

@ -30,7 +30,7 @@ class JavaScript extends Renderer
// Watermark.
if (empty($this->chart->defaults()->getWatermark()) === false) {
$script[] = 'const chart_watermark_'.$this->chart->getId().' = {
$script[] = 'const chart_watermark_'.$this->chart->getId().' = {
id: "chart_watermark_'.$this->chart->getId().'",
beforeDraw: (chart) => {
if (Object.prototype.hasOwnProperty.call(chart, "config") &&
@ -128,11 +128,9 @@ class JavaScript extends Renderer
}
}
};';
$script[] = 'Chart.register(chart_watermark_'.$this->chart->getId().');';
$script[] = 'Chart.register(chart_watermark_'.$this->chart->getId().');';
}
// Create chart.
$script[] = 'try {';
$script[] = " var chart = new Chart( ctx, {$json} );";
@ -143,6 +141,32 @@ class JavaScript extends Renderer
$script[] = ' Chart.defaults.font.style = "'.($this->chart->defaults()->getFonts()->getStyle() ?? 'normal').'";';
$script[] = ' Chart.defaults.font.weight = "'.($this->chart->defaults()->getFonts()->getWeight() ?? '').'";';
if ($this->chart->options()->getTheme() !== null) {
if ((int) $this->chart->options()->getTheme() === 2) {
$script[] = ' Chart.defaults.color = "#ffffff";';
$script[] = '
if (chart.config.options.scales !== undefined
&& chart.config.options.scales.x !== undefined
&& chart.config.options.scales.x.ticks !== undefined
) {
chart.config.options.scales.x.ticks.color = "#ffffff";
}
if (chart.config.options.scales !== undefined &&
chart.config.options.scales.y !== undefined &&
chart.config.options.scales.y.ticks !== undefined
) {
chart.config.options.scales.y.ticks.color = "#ffffff";
}
if (chart.config.options.title !== undefined ) {
chart.config.options.title.fontColor = "#ffffff";
}
';
}
}
$script[] = '} catch (error) {';
$script[] = ' console.error(error);';
$script[] = '}';