From 0c013fe71e0630b9c4080fec45d2eb655fba8466 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Ko=C5=88a=C5=99=C3=ADk?= <dvd.kon@gmail.com>
Date: Tue, 17 Nov 2020 13:26:41 +0100
Subject: [PATCH 1/2] feat(axis): custom axis tick/label positions. close
 #13627

---
 src/coord/axisCommonTypes.ts      |   4 +-
 src/coord/axisTickLabelBuilder.ts |  42 +++++++
 test/axis-customTicks.html        | 202 ++++++++++++++++++++++++++++++
 3 files changed, 247 insertions(+), 1 deletion(-)
 create mode 100644 test/axis-customTicks.html

diff --git a/src/coord/axisCommonTypes.ts b/src/coord/axisCommonTypes.ts
index 3ba456835f..4287256f03 100644
--- a/src/coord/axisCommonTypes.ts
+++ b/src/coord/axisCommonTypes.ts
@@ -144,6 +144,7 @@ interface AxisTickOption {
     // The length of axisTick.
     length?: number,
     lineStyle?: LineStyleOption
+    customValues?: (number | string | Date)[],
 
     // --------------------------------------------
     // [Properties below only for 'category' axis]:
@@ -183,6 +184,7 @@ interface AxisLabelOption extends Omit<TextCommonOption, 'color'> {
     margin?: number,
     // value is supposed to be OptionDataPrimitive but for time axis, it is time stamp.
     formatter?: AxisLabelFormatterOption | TimeAxisLabelFormatterOption,
+    customValues?: (number | string | Date)[],
 
     // --------------------------------------------
     // [Properties below only for 'category' axis]:
@@ -219,4 +221,4 @@ interface SplitAreaOption {
     interval?: 'auto' | number | ((index:number, value: string) => boolean)
     // colors will display in turn
     areaStyle?: AreaStyleOption<ZRColor[]>
-}
\ No newline at end of file
+}
diff --git a/src/coord/axisTickLabelBuilder.ts b/src/coord/axisTickLabelBuilder.ts
index 332e542e83..8787207ca8 100644
--- a/src/coord/axisTickLabelBuilder.ts
+++ b/src/coord/axisTickLabelBuilder.ts
@@ -60,6 +60,28 @@ type InnerStore = {
 
 const inner = makeInner<InnerStore, any>();
 
+function tickValuesToNumbers(axis: Axis, values: (number | string | Date)[]) {
+    const nums = values.map(val => {
+        if (zrUtil.isString(val)) {
+            return axis.model.get('data').indexOf(val);
+        }
+        else if (val instanceof Date) {
+            return val.getTime();
+        }
+        else {
+            return val;
+        }
+    });
+    if (axis.type === 'time' && nums.length > 0) {
+        // Time axis needs duplicate first/last tick (see TimeScale.getTicks())
+        // The first and last tick/label don't get drawn
+        nums.sort();
+        nums.unshift(nums[0]);
+        nums.push(nums[nums.length - 1]);
+    }
+    return nums;
+}
+
 export function createAxisLabels(axis: Axis): {
     labels: {
         formattedLabel: string,
@@ -68,6 +90,20 @@ export function createAxisLabels(axis: Axis): {
     }[],
     labelCategoryInterval?: number
 } {
+    const custom = axis.getLabelModel().get('customValues');
+    if (custom) {
+        const labelFormatter = makeLabelFormatter(axis);
+        return {
+            labels: tickValuesToNumbers(axis, custom).map(numval => {
+                const tick = {value: numval};
+                return {
+                    formattedLabel: labelFormatter(tick),
+                    rawLabel: axis.scale.getLabel(tick),
+                    tickValue: numval
+                };
+            })
+        };
+    }
     // Only ordinal scale support tick interval
     return axis.type === 'category'
         ? makeCategoryLabels(axis)
@@ -86,6 +122,12 @@ export function createAxisTicks(axis: Axis, tickModel: AxisBaseModel): {
     ticks: number[],
     tickCategoryInterval?: number
 } {
+    const custom = axis.getTickModel().get('customValues');
+    if (custom) {
+        return {
+            ticks: tickValuesToNumbers(axis, custom)
+        };
+    }
     // Only ordinal scale support tick interval
     return axis.type === 'category'
         ? makeCategoryTicks(axis, tickModel)
diff --git a/test/axis-customTicks.html b/test/axis-customTicks.html
new file mode 100644
index 0000000000..d11ec2972c
--- /dev/null
+++ b/test/axis-customTicks.html
@@ -0,0 +1,202 @@
+<!DOCTYPE html>
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements.  See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership.  The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License.  You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied.  See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <script src="lib/esl.js"></script>
+        <script src="lib/config.js"></script>
+        <script src="lib/jquery.min.js"></script>
+        <script src="lib/facePrint.js"></script>
+        <script src="lib/testHelper.js"></script>
+        <!-- <script src="ut/lib/canteen.js"></script> -->
+        <link rel="stylesheet" href="lib/reset.css" />
+    </head>
+    <body>
+        <style>
+        </style>
+        <div id="main0"></div>
+        <div id="main1"></div>
+        <div id="main2"></div>
+        <div id="main3"></div>
+
+        <script>
+        require(['echarts'], function (echarts) {
+            var vaData = [[0, 2.57], [1, 6.49], [2, 8.42], [3, 8.72], [4, 1.97], [5, 8.83], [6, 0.94], [7, 0.14], [8, 5.55], [9, 4.54]];
+
+
+            var option = {
+                xAxis: {
+                    type: 'value',
+                    axisLabel: {
+                        customValues: [0, 4, 7, 8, 9]
+                    },
+                    axisTick: {
+                        alignWithLabel: true,
+                        customValues: [0, 0.5, 1, 1.5, 2, 8, 9]
+                    },
+                },
+                yAxis: {
+                    type: 'value'
+                },
+                series: [{
+                    type: 'line',
+                    data: vaData,
+                    smooth: true
+                }]
+            };
+
+            var chart = testHelper.create(echarts, 'main0', {
+                title: [
+                    'Value axis custom tick/label positions',
+                    'Ticks on 0, 0.5, 1, 1.5, 2, 8, 9',
+                    'Labels on 0, 4, 7, 8, 9'
+                ],
+                option: option
+            });
+        });
+        </script>
+
+        <script>
+        require(['echarts'/*, 'map/js/china' */], function (echarts) {
+            var caData = [7.66, 7.70, 2.11, 7.62, 5.56, 5.09, 3.26, 0.24, -0.46, 8.11];
+
+            var option = {
+                xAxis: {
+                    type: 'category',
+                    data: ['1', '2', '3', 'four', 'five', '6', '7', '8', '9', '10'],
+                    axisLabel: {
+                        customValues: ["1", "four", 4, "10"]
+                    },
+                    axisTick: {
+                        alignWithLabel: true,
+                        customValues: ["1", 3, "five", 6, "10"]
+                    },
+                },
+                yAxis: {
+                    type: 'value'
+                },
+                series: [{
+                    type: 'line',
+                    data: caData,
+                    smooth: true
+                }]
+            };
+
+            var chart = testHelper.create(echarts, 'main1', {
+                title: [
+                    'Category axis custom tick/label positions',
+                    'Ticks on 1, four, five, 7, 10',
+                    'Labels on 1, four, five, 10'
+                ],
+                option: option
+            });
+        });
+        </script>
+
+        <script>
+        require(['echarts'], function (echarts) {
+            var vals = [1.64, -0.84, -0.96, 8.03, 7.53, 4.14, 3.91, 8.39, 7.02, 2.28];
+            var taData = [];
+            for (var i = 0; i < 10; i++) {
+                taData.push([new Date(2020, 1, i+1), vals[i]]);
+            }
+
+            var option = {
+                xAxis: {
+                    type: 'time',
+                    axisLabel: {
+                        customValues: [
+                            new Date(2020, 1, 1),
+                            new Date(2020, 1, 4),
+                            new Date(2020, 1, 5),
+                            new Date(2020, 1, 10)
+                        ]
+                    },
+                    axisTick: {
+                        alignWithLabel: true,
+                        customValues: [
+                            new Date(2020, 1, 1),
+                            new Date(2020, 1, 4),
+                            new Date(2020, 1, 10)
+                        ]
+                    },
+                },
+                yAxis: {
+                    type: 'value'
+                },
+                series: [{
+                    type: 'line',
+                    data: taData,
+                    smooth: true
+                }]
+            };
+
+            var chart = testHelper.create(echarts, 'main2', {
+                title: [
+                    'Time axis custom tick/label positions',
+                    'Ticks on 1st, 4th, 10th',
+                    'Labels on 1, 4th, 5th, 10th'
+                ],
+                option: option
+            });
+        });
+        </script>
+
+        <script>
+        require(['echarts'], function (echarts) {
+            var laData = [[1, 3.47], [2, 7.84], [3, 2.01], [4, 4.20], [5, 3.87], [6, 1.50], [7, 2.56], [8, 6.40], [9, 1.74], [10, 2.96]];
+
+            var option = {
+                xAxis: {
+                    type: 'log',
+                    axisLabel: {
+                        customValues: [1, 4, 7, 8, 10]
+                    },
+                    axisTick: {
+                        alignWithLabel: true,
+                        customValues: [1, 0.5, 1, 1.5, 2, 8, 10]
+                    },
+                },
+                yAxis: {
+                    type: 'value'
+                },
+                series: [{
+                    type: 'line',
+                    data: laData
+                }]
+            };
+
+            var chart = testHelper.create(echarts, 'main3', {
+                title: [
+                    'Log axis custom tick/label positions',
+                    'Ticks on 1, 1.5, 2, 8, 10',
+                    'Labels on 1, 4, 7, 8, 10'
+                ],
+                option: option
+            });
+        });
+        </script>
+
+
+    </body>
+</html>

From 0c908241d8cf6ee2e3daf26c0582fae40061179f Mon Sep 17 00:00:00 2001
From: Ovilia <zwl.sjtu@gmail.com>
Date: Fri, 10 May 2024 14:53:21 +0800
Subject: [PATCH 2/2] fix: fix failed test cases and improve code

---
 src/coord/axisTickLabelBuilder.ts | 12 +-----------
 test/axis-customTicks.html        |  2 +-
 2 files changed, 2 insertions(+), 12 deletions(-)

diff --git a/src/coord/axisTickLabelBuilder.ts b/src/coord/axisTickLabelBuilder.ts
index dcd9febd7e..e7f7bbb088 100644
--- a/src/coord/axisTickLabelBuilder.ts
+++ b/src/coord/axisTickLabelBuilder.ts
@@ -61,17 +61,7 @@ type InnerStore = {
 const inner = makeInner<InnerStore, any>();
 
 function tickValuesToNumbers(axis: Axis, values: (number | string | Date)[]) {
-    const nums = values.map(val => {
-        if (zrUtil.isString(val)) {
-            return axis.model.get('data').indexOf(val);
-        }
-        else if (val instanceof Date) {
-            return val.getTime();
-        }
-        else {
-            return val;
-        }
-    });
+    const nums = zrUtil.map(values, val => axis.scale.parse(val));
     if (axis.type === 'time' && nums.length > 0) {
         // Time axis needs duplicate first/last tick (see TimeScale.getTicks())
         // The first and last tick/label don't get drawn
diff --git a/test/axis-customTicks.html b/test/axis-customTicks.html
index d11ec2972c..24f9c7dc97 100644
--- a/test/axis-customTicks.html
+++ b/test/axis-customTicks.html
@@ -23,7 +23,7 @@
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <script src="lib/esl.js"></script>
+        <script src="lib/simpleRequire.js"></script>
         <script src="lib/config.js"></script>
         <script src="lib/jquery.min.js"></script>
         <script src="lib/facePrint.js"></script>