rip out dynamic color alteration in JS in favor of a single color tha…

…t 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?
ibericode · Oct 22, 2023 · ebf5142 · ebf5142
1 parent 5c031fb
commit ebf5142
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 52 deletions.
diff --git 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
@@ -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}) {
       <div class="ka-chart--tooltip-box">
         <div class="ka-chart--tooltip-heading">${format(data.date, dateFormatOptions)}</div>
         <div style="display: flex;">
-          <div class="ka-chart--tooltip-content visitors" style="border-top-color: ${color2}">
+          <div class="ka-chart--tooltip-content ka--visitors">
             <div class="ka-chart--tooltip-amount">${data.visitors}</div>
             <div>${__('Visitors', 'koko-analytics')}</div>
           </div>
-          <div class="ka-chart--tooltip-content pageviews" style="border-top-color: ${color1}">
+          <div class="ka-chart--tooltip-content ka--pageviews">
             <div class="ka-chart--tooltip-amount">${data.pageviews}</div>
             <div>${__('Pageviews', 'koko-analytics')}</div>
           </div>
@@ -212,20 +208,18 @@ export default function Chart({startDate, endDate, width, height}) {
                 onMouseLeave={hideTooltip}
               >
                 <rect
-                  className='pageviews'
+                  className='ka--pageviews'
                   height={pageviewHeight}
                   width={barWidth}
                   x={x + barPadding}
                   y={getY(d.pageviews)}
-                  fill={color1}
                 />
                 <rect
-                  className='visitors'
+                  className='ka--visitors'
                   height={visitorHeight}
                   width={barWidth}
                   x={x + barPadding}
                   y={getY(d.visitors)}
-                  fill={color2}
                 />
               </g>)
             })}

diff --git a/assets/src/js/util/colors.js b/assets/src/js/util/colors.js
diff --git 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 <a href="%1$s">review the plugin on WordPress.org</a> or <a href="%2$s">write about it on your blog</a> 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