cats-charts 0.0.75 → 0.0.77

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/fesm2022/cats-charts.mjs +81 -29
  2. package/fesm2022/cats-charts.mjs.map +1 -1
  3. package/index.d.ts +1 -0
  4. package/package.json +1 -1
package/fesm2022/cats-charts.mjs CHANGED
@@ -1084,7 +1084,7 @@ class Charts {
1084
1084
  font-size: 12px;
1085
1085
  color: #434A51;
1086
1086
  ">
1087
- ${name}: <b style="color:#111; font-weight:600;">${config.valueFormatter ? config.valueFormatter(value) : value}</b> ${config.showTooltipPercent ? '(' + percent + '%)' : ''}
1087
+ ${name}: <b style="color:#111; font-weight:600;">${config.valueFormatter ? config.valueFormatter(value) : this.toMaxDecimals(value)}</b> ${config.showTooltipPercent ? '(' + percent + '%)' : ''}
1088
1088
  </span>
1089
1089
  </div>
1090
1090
  ${extraTooltipDataTemplate}
@@ -1134,7 +1134,7 @@ class Charts {
1134
1134
  display:inline-block;
1135
1135
  "></span>
1136
1136
 
1137
- <span>${name}: <b style="color:#111;font-weight:600;">${value}</b></span>
1137
+ <span>${name}: <b style="color:#111;font-weight:600;">${this.toMaxDecimals(value)}</b></span>
1138
1138
  </div>
1139
1139
  `;
1140
1140
  });
@@ -1163,7 +1163,7 @@ class Charts {
1163
1163
  color:#434A51;
1164
1164
  padding-top: 0.5rem;
1165
1165
  ">
1166
- Total: <b style="color:#111;font-weight:600;">${total}</b>
1166
+ Total: <b style="color:#111;font-weight:600;">${this.toMaxDecimals(total)}</b>
1167
1167
  ${extraTooltipDataTemplate}
1168
1168
  </div>
1169
1169
 
@@ -1413,6 +1413,12 @@ class Charts {
1413
1413
  maxHeight = Math.max(maxHeight, rect.height + verticalPadding);
1414
1414
  return maxHeight + 6;
1415
1415
  }
1416
+ toMaxDecimals(value, maxDecimal = 2) {
1417
+ if (!Number.isFinite(value)) {
1418
+ return value;
1419
+ }
1420
+ return Number(value.toFixed(maxDecimal));
1421
+ }
1416
1422
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Charts, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
1417
1423
  static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Charts, providedIn: 'root' });
1418
1424
  }
@@ -1558,59 +1564,83 @@ class LinesChart {
1558
1564
  type: 'category',
1559
1565
  // boundaryGap: false,
1560
1566
  data: this.config?.xAxisData,
1567
+ name: this.config?.xAxisName || '',
1568
+ nameLocation: 'center',
1569
+ ...(this.config?.xAxis || {}),
1561
1570
  axisLine: {
1562
1571
  show: this.config?.showXAxisLine ?? true,
1572
+ ...(this.config?.xAxis?.axisLine || {}),
1563
1573
  lineStyle: {
1564
1574
  color: '#C0C2C5',
1565
1575
  width: 1,
1576
+ ...(this.config?.xAxis?.axisLine?.lineStyle || {}),
1566
1577
  },
1567
1578
  },
1568
1579
  axisTick: {
1569
1580
  show: false,
1581
+ ...(this.config?.xAxis?.axisTick || {}),
1570
1582
  },
1571
1583
  axisLabel: {
1572
1584
  show: this.config?.showXAxisLabel ?? true,
1573
1585
  color: '#434A51',
1574
1586
  fontSize: 12,
1587
+ alignMinLabel: 'left',
1588
+ alignMaxLabel: 'right',
1589
+ ...(this.config?.xAxis?.axisLabel || {}),
1575
1590
  },
1576
- name: this.config?.xAxisName || '',
1577
- nameLocation: 'center',
1578
1591
  nameTextStyle: {
1579
1592
  color: '#434A51',
1580
1593
  fontSize: 14,
1581
1594
  fontWeight: 400,
1595
+ ...(this.config?.xAxis?.nameTextStyle || {}),
1582
1596
  },
1583
1597
  splitLine: {
1584
1598
  show: this.config?.showXAxisSplitLine ?? true,
1599
+ ...(this.config?.xAxis?.splitLine || {}),
1585
1600
  lineStyle: {
1586
1601
  type: 'dashed',
1587
1602
  color: '#C0C2C5',
1588
1603
  width: 1,
1604
+ ...(this.config?.xAxis?.splitLine?.lineStyle || {}),
1589
1605
  },
1590
1606
  },
1591
- ...(this.config?.xAxis || {}),
1592
1607
  },
1593
1608
  yAxis: [
1594
1609
  {
1595
1610
  show: !this.config?.isTrendChart,
1596
1611
  type: 'value',
1597
1612
  boundaryGap: this.config?.isTrendChart ? [0.2] : undefined,
1613
+ name: this.config?.yAxisName || '',
1614
+ nameLocation: 'center',
1615
+ ...(this.config?.yAxis || {}),
1598
1616
  axisLine: {
1599
1617
  show: this.config?.showYAxisLine ?? true,
1618
+ ...(this.config?.yAxis?.axisLine || {}),
1600
1619
  lineStyle: {
1601
1620
  color: '#C0C2C5',
1602
1621
  width: 1,
1622
+ ...(this.config?.yAxis?.axisLine?.lineStyle || {}),
1603
1623
  },
1604
1624
  },
1605
1625
  axisTick: {
1606
1626
  show: false,
1627
+ ...(this.config?.yAxis?.axisTick || {}),
1607
1628
  },
1608
- name: this.config?.yAxisName || '',
1609
- nameLocation: 'center',
1610
1629
  nameTextStyle: {
1611
1630
  color: '#434A51',
1612
1631
  fontSize: 14,
1613
1632
  fontWeight: 400,
1633
+ ...(this.config?.yAxis?.nameTextStyle || {}),
1634
+ },
1635
+ splitLine: {
1636
+ show: this.config?.showYAxisSplitLine ?? true,
1637
+ ...(this.config?.yAxis?.splitLine || {}),
1638
+ lineStyle: {
1639
+ type: 'dashed',
1640
+ color: '#C0C2C5',
1641
+ width: 1,
1642
+ ...(this.config?.yAxis?.splitLine?.lineStyle || {}),
1643
+ },
1614
1644
  },
1615
1645
  axisLabel: {
1616
1646
  show: this.config?.showYAxisLabel ?? true,
@@ -1647,16 +1677,8 @@ class LinesChart {
1647
1677
  }
1648
1678
  return value;
1649
1679
  },
1680
+ ...(this.config?.yAxis?.axisLabel || {}),
1650
1681
  },
1651
- splitLine: {
1652
- show: this.config?.showYAxisSplitLine ?? true,
1653
- lineStyle: {
1654
- type: 'dashed',
1655
- color: '#C0C2C5',
1656
- width: 1,
1657
- },
1658
- },
1659
- ...(this.config?.yAxis || {}),
1660
1682
  },
1661
1683
  ...(this.config?.secondaryYAxis
1662
1684
  ? [
@@ -1664,15 +1686,21 @@ class LinesChart {
1664
1686
  show: !this.config?.isTrendChart,
1665
1687
  type: 'value',
1666
1688
  boundaryGap: this.config?.isTrendChart ? [0.2] : undefined,
1689
+ name: this.config?.secondaryYAxisName || '',
1690
+ nameLocation: 'center',
1691
+ ...(this.config?.secondaryYAxisConfig || {}),
1667
1692
  axisLine: {
1668
1693
  show: this.config?.showYAxisLine ?? true,
1694
+ ...(this.config?.secondaryYAxisConfig?.axisLine || {}),
1669
1695
  lineStyle: {
1670
1696
  color: '#C0C2C5',
1671
1697
  width: 1,
1698
+ ...(this.config?.secondaryYAxisConfig?.axisLine?.lineStyle || {}),
1672
1699
  },
1673
1700
  },
1674
1701
  axisTick: {
1675
1702
  show: false,
1703
+ ...(this.config?.secondaryYAxisConfig?.axisTick || {}),
1676
1704
  },
1677
1705
  axisLabel: {
1678
1706
  show: this.config?.showSecondaryYAxisLabel ?? true,
@@ -1709,23 +1737,24 @@ class LinesChart {
1709
1737
  }
1710
1738
  return value;
1711
1739
  },
1740
+ ...(this.config?.secondaryYAxisConfig?.axisLabel || {}),
1712
1741
  },
1713
- name: this.config?.secondaryYAxisName || '',
1714
- nameLocation: 'center',
1715
1742
  nameTextStyle: {
1716
1743
  color: '#434A51',
1717
1744
  fontSize: 14,
1718
1745
  fontWeight: 400,
1746
+ ...(this.config?.secondaryYAxisConfig?.nameTextStyle || {}),
1719
1747
  },
1720
1748
  splitLine: {
1721
1749
  show: this.config?.showSecondaryYAxisSplitLine ?? true,
1750
+ ...(this.config?.secondaryYAxisConfig?.splitLine || {}),
1722
1751
  lineStyle: {
1723
1752
  type: 'dashed',
1724
1753
  color: '#C0C2C5',
1725
1754
  width: 1,
1755
+ ...(this.config?.secondaryYAxisConfig?.splitLine?.lineStyle || {}),
1726
1756
  },
1727
1757
  },
1728
- ...(this.config?.secondaryYAxisConfig || {}),
1729
1758
  },
1730
1759
  ]
1731
1760
  : []),
@@ -2109,57 +2138,71 @@ class BarChart {
2109
2138
  xAxis: {
2110
2139
  type: 'category',
2111
2140
  data: this.config?.xAxisData,
2141
+ name: this.config?.xAxisName || '',
2142
+ nameLocation: 'center',
2143
+ ...(this.config?.xAxis || {}),
2112
2144
  axisLine: {
2113
2145
  show: this.config?.showXAxisLine ?? true,
2146
+ ...(this.config?.xAxis?.axisLine || {}),
2114
2147
  lineStyle: {
2115
2148
  color: '#C0C2C5',
2116
2149
  width: 1,
2150
+ ...(this.config?.xAxis?.axisLine?.lineStyle || {}),
2117
2151
  },
2118
2152
  },
2119
2153
  axisTick: {
2120
2154
  show: false,
2155
+ ...(this.config?.xAxis?.axisTick || {}),
2121
2156
  },
2122
2157
  axisLabel: {
2123
2158
  show: this.config?.showXAxisLabel ?? true,
2124
2159
  color: '#434A51',
2125
2160
  fontSize: 12,
2161
+ alignMinLabel: 'left',
2162
+ alignMaxLabel: 'right',
2163
+ ...(this.config?.xAxis?.axisLabel || {}),
2126
2164
  },
2127
- name: this.config?.xAxisName || '',
2128
- nameLocation: 'center',
2129
2165
  nameTextStyle: {
2130
2166
  color: '#434A51',
2131
2167
  fontSize: 14,
2132
2168
  fontWeight: 400,
2169
+ ...(this.config?.xAxis?.nameTextStyle || {}),
2133
2170
  },
2134
2171
  splitLine: {
2135
2172
  show: this.config?.showXAxisSplitLine ?? true,
2173
+ ...(this.config?.xAxis?.splitLine || {}),
2136
2174
  lineStyle: {
2137
2175
  type: 'dashed',
2138
2176
  color: '#C0C2C5',
2139
2177
  width: 1,
2178
+ ...(this.config?.xAxis?.splitLine?.lineStyle || {}),
2140
2179
  },
2141
2180
  },
2142
- ...(this.config?.xAxis || {}),
2143
2181
  },
2144
2182
  yAxis: [
2145
2183
  {
2146
2184
  type: 'value',
2185
+ name: this.config?.yAxisName || '',
2186
+ nameLocation: 'center',
2187
+ ...(this.config?.yAxis || {}),
2147
2188
  axisLine: {
2148
2189
  show: this.config?.showYAxisLine ?? true,
2190
+ ...(this.config?.yAxis?.axisLine || {}),
2149
2191
  lineStyle: {
2150
2192
  color: '#C0C2C5',
2151
2193
  width: 1,
2194
+ ...(this.config?.yAxis?.lineStyle || {}),
2152
2195
  },
2153
2196
  },
2154
2197
  axisTick: {
2155
2198
  show: false,
2199
+ ...(this.config?.yAxis?.axisTick || {}),
2156
2200
  },
2157
- name: this.config?.yAxisName || '',
2158
- nameLocation: 'center',
2159
2201
  nameTextStyle: {
2160
2202
  color: '#434A51',
2161
2203
  fontSize: 14,
2162
2204
  fontWeight: 400,
2205
+ ...(this.config?.yAxis?.nameTextStyle || {}),
2163
2206
  },
2164
2207
  axisLabel: {
2165
2208
  show: this.config?.showYAxisLabel ?? true,
@@ -2196,30 +2239,38 @@ class BarChart {
2196
2239
  }
2197
2240
  return value;
2198
2241
  },
2242
+ ...(this.config?.yAxis?.axisLabel || {}),
2199
2243
  },
2200
2244
  splitLine: {
2201
2245
  show: this.config?.showYAxisSplitLine ?? true,
2246
+ ...(this.config?.yAxis?.splitLine || {}),
2202
2247
  lineStyle: {
2203
2248
  type: 'dashed',
2204
2249
  color: '#C0C2C5',
2205
2250
  width: 1,
2251
+ ...(this.config?.yAxis?.splitLine?.lineStyle || {}),
2206
2252
  },
2207
2253
  },
2208
- ...(this.config?.yAxis || {}),
2209
2254
  },
2210
2255
  ...(this.config?.secondaryYAxis
2211
2256
  ? [
2212
2257
  {
2213
2258
  type: 'value',
2259
+ name: this.config?.secondaryYAxisName || '',
2260
+ nameLocation: 'center',
2261
+ ...(this.config?.secondaryYAxisConfig || {}),
2214
2262
  axisLine: {
2215
2263
  show: this.config?.showYAxisLine ?? true,
2264
+ ...(this.config?.secondaryYAxisConfig?.axisLine || {}),
2216
2265
  lineStyle: {
2217
2266
  color: '#C0C2C5',
2218
2267
  width: 1,
2268
+ ...(this.config?.secondaryYAxisConfig?.axisLine?.lineStyle || {}),
2219
2269
  },
2220
2270
  },
2221
2271
  axisTick: {
2222
2272
  show: false,
2273
+ ...(this.config?.secondaryYAxisConfig?.axisTick || {}),
2223
2274
  },
2224
2275
  axisLabel: {
2225
2276
  show: this.config?.showSecondaryYAxisLabel ?? true,
@@ -2256,23 +2307,24 @@ class BarChart {
2256
2307
  }
2257
2308
  return value;
2258
2309
  },
2310
+ ...(this.config?.secondaryYAxisConfig?.axisLabel || {}),
2259
2311
  },
2260
- name: this.config?.secondaryYAxisName || '',
2261
- nameLocation: 'center',
2262
2312
  nameTextStyle: {
2263
2313
  color: '#434A51',
2264
2314
  fontSize: 14,
2265
2315
  fontWeight: 400,
2316
+ ...(this.config?.secondaryYAxisConfig?.nameTextStyle || {}),
2266
2317
  },
2267
2318
  splitLine: {
2268
2319
  show: this.config?.showSecondaryYAxisSplitLine ?? true,
2320
+ ...(this.config?.secondaryYAxisConfig?.splitLine || {}),
2269
2321
  lineStyle: {
2270
2322
  type: 'dashed',
2271
2323
  color: '#C0C2C5',
2272
2324
  width: 1,
2325
+ ...(this.config?.secondaryYAxisConfig?.splitLine?.lineStyle || {}),
2273
2326
  },
2274
2327
  },
2275
- ...(this.config?.secondaryYAxisConfig || {}),
2276
2328
  },
2277
2329
  ]
2278
2330
  : []),