From ebf514238ae20a762ec74774d1d652aa9715673b Mon Sep 17 00:00:00 2001 From: Danny van Kooten Date: Sun, 22 Oct 2023 20:03:50 +0200 Subject: [PATCH] rip out dynamic color alteration in JS in favor of a single color that matches the koko brand. open to re-implementing support for wp admin color schemes but through css selectors, but let's first see if users actually use/care about this feature? --- assets/src/css/chart.css | 13 +++++++++++-- assets/src/js/components/chart.js | 14 ++++---------- assets/src/js/util/colors.js | 26 -------------------------- src/class-admin.php | 14 -------------- 4 files changed, 15 insertions(+), 52 deletions(-) delete mode 100644 assets/src/js/util/colors.js diff --git a/assets/src/css/chart.css b/assets/src/css/chart.css index 508c473f..5068fc59 100644 --- a/assets/src/css/chart.css +++ b/assets/src/css/chart.css @@ -23,8 +23,8 @@ display: block; flex: 1; } -.ka-chart--tooltip-content.pageviews, -.ka-chart--tooltip-content.visitors { +.ka-chart--tooltip-content.ka--pageviews, +.ka-chart--tooltip-content.ka--visitors { border-top: 3px solid transparent; } .ka-chart--tooltip-amount { @@ -41,3 +41,12 @@ border-right: 6px solid transparent; border-top: 6px solid rgba(46, 54, 63, 0.96); } + +.ka--pageviews { + border-top-color: #e14d43 !important; + fill: #e14d43; +} +.ka--visitors { + border-top-color: #b43d35 !important; + fill: #b43d35; +} diff --git a/assets/src/js/components/chart.js b/assets/src/js/components/chart.js index 62954ec7..33c23a1a 100644 --- a/assets/src/js/components/chart.js +++ b/assets/src/js/components/chart.js @@ -1,14 +1,10 @@ import React, {useState, useEffect, useMemo} from "react" import { request } from '../util/api.js' import { magnitude, formatLargeNumber } from '../util/numbers' -import { modify } from '../util/colors' import { isLastDayOfMonth, toISO8601, format } from '../util/dates.js' import { __ } from '@wordpress/i18n' import "../../css/chart.css" -const {colors} = window.koko_analytics; -const color1 = colors.pop() -const color2 = modify(color1, -20) const padding = { left: 48, bottom: 36, @@ -108,11 +104,11 @@ export default function Chart({startDate, endDate, width, height}) {
${format(data.date, dateFormatOptions)}
-
+
${data.visitors}
${__('Visitors', 'koko-analytics')}
-
+
${data.pageviews}
${__('Pageviews', 'koko-analytics')}
@@ -212,20 +208,18 @@ export default function Chart({startDate, endDate, width, height}) { onMouseLeave={hideTooltip} > ) })} diff --git a/assets/src/js/util/colors.js b/assets/src/js/util/colors.js deleted file mode 100644 index 429a8009..00000000 --- a/assets/src/js/util/colors.js +++ /dev/null @@ -1,26 +0,0 @@ -/** - * Lighten or darken a hex color by a certain amount. - * - * @param {string} color - * @param {int} percent - * @returns {string} - */ -export function modify (color, percent) { - let R = parseInt(color.substring(1, 3), 16) - let G = parseInt(color.substring(3, 5), 16) - let B = parseInt(color.substring(5, 7), 16) - - R = parseInt(R * (100 + percent) / 100, 10) - G = parseInt(G * (100 + percent) / 100, 10) - B = parseInt(B * (100 + percent) / 100, 10) - - R = (R < 255) ? R.toString(16) : 'ff' - G = (G < 255) ? G.toString(16) : 'ff' - B = (B < 255) ? B.toString(16) : 'ff' - - const RR = ((R.length === 1) ? '0' + R : R) - const GG = ((G.length === 1) ? '0' + G : G) - const BB = ((B.length === 1) ? '0' + B : B) - - return '#' + RR + GG + BB -} diff --git a/src/class-admin.php b/src/class-admin.php index f7e54693..c1b60082 100644 --- a/src/class-admin.php +++ b/src/class-admin.php @@ -66,7 +66,6 @@ public function enqueue_scripts($page): void $script_data = array( 'root' => rest_url(), 'nonce' => wp_create_nonce('wp_rest'), - 'colors' => $this->get_colors(), ); // load scripts for dashboard widget wp_enqueue_script('koko-analytics-dashboard-widget', plugins_url('/assets/dist/js/dashboard-widget.js', KOKO_ANALYTICS_PLUGIN_FILE), array( 'wp-i18n', 'react', 'react-dom' ), KOKO_ANALYTICS_VERSION, true); @@ -79,11 +78,9 @@ public function enqueue_scripts($page): void if (!isset($_GET['tab'])) { $settings = get_settings(); - $colors = $this->get_colors(); $script_data = array( 'root' => rest_url(), 'nonce' => wp_create_nonce('wp_rest'), - 'colors' => $colors, 'startOfWeek' => (int) get_option('start_of_week'), 'defaultDateRange' => $settings['default_view'], 'items_per_page' => (int) apply_filters('koko_analytics_items_per_page', 20), @@ -184,17 +181,6 @@ public function footer_text(): string return sprintf(wp_kses(__('If you enjoy using Koko Analytics, please review the plugin on WordPress.org or write about it on your blog to help out.', 'koko-analytics'), array( 'a' => array( 'href' => array() ) )), 'https://wordpress.org/support/view/plugin-reviews/koko-analytics?rate=5#postform', admin_url('post-new.php')); } - private function get_colors(): array - { - $color_scheme_name = get_user_option('admin_color'); - global $_wp_admin_css_colors; - if (empty($_wp_admin_css_colors[ $color_scheme_name ])) { - $color_scheme_name = 'fresh'; - } - - return $_wp_admin_css_colors[ $color_scheme_name ]->colors; - } - public function register_dashboard_widget(): void { // only show if user can view stats