@smallwebco/tinypivot-react 1.0.51 → 1.0.53
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.
- package/dist/index.cjs +1379 -639
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1339 -596
- package/dist/index.js.map +1 -1
- package/dist/style.css +469 -0
- package/package.json +4 -2
package/dist/style.css
CHANGED
|
@@ -2632,3 +2632,472 @@
|
|
|
2632
2632
|
.vpg-theme-dark .vpg-range-btn:hover:not(:disabled) { background: #475569; border-color: #64748b; }
|
|
2633
2633
|
.vpg-theme-dark .vpg-filter-summary { background: rgba(99, 102, 241, 0.15); color: #a5b4fc; }
|
|
2634
2634
|
|
|
2635
|
+
/* ==========================================================================
|
|
2636
|
+
Chart Builder Styles
|
|
2637
|
+
========================================================================== */
|
|
2638
|
+
|
|
2639
|
+
/* Chart button in toggle */
|
|
2640
|
+
.vpg-view-btn.vpg-chart-btn.active { background: #8b5cf6; }
|
|
2641
|
+
.vpg-view-btn.vpg-pro-feature { opacity: 0.6; cursor: not-allowed; }
|
|
2642
|
+
.vpg-view-btn.vpg-pro-feature:hover { background: transparent; }
|
|
2643
|
+
|
|
2644
|
+
.vpg-pro-badge {
|
|
2645
|
+
font-size: 0.5rem;
|
|
2646
|
+
font-weight: 700;
|
|
2647
|
+
padding: 0.125rem 0.25rem;
|
|
2648
|
+
border-radius: 0.25rem;
|
|
2649
|
+
background: #fef3c7;
|
|
2650
|
+
color: #92400e;
|
|
2651
|
+
margin-left: 0.25rem;
|
|
2652
|
+
}
|
|
2653
|
+
|
|
2654
|
+
/* Chart View Container */
|
|
2655
|
+
.vpg-chart-view {
|
|
2656
|
+
flex: 1;
|
|
2657
|
+
display: flex;
|
|
2658
|
+
flex-direction: column;
|
|
2659
|
+
overflow: hidden;
|
|
2660
|
+
min-height: 400px;
|
|
2661
|
+
}
|
|
2662
|
+
|
|
2663
|
+
.vpg-chart-filter-bar {
|
|
2664
|
+
display: flex;
|
|
2665
|
+
align-items: center;
|
|
2666
|
+
gap: 0.5rem;
|
|
2667
|
+
padding: 0.5rem 1rem;
|
|
2668
|
+
background: #eef2ff;
|
|
2669
|
+
border-bottom: 1px solid #c7d2fe;
|
|
2670
|
+
font-size: 0.75rem;
|
|
2671
|
+
color: #4338ca;
|
|
2672
|
+
}
|
|
2673
|
+
|
|
2674
|
+
.vpg-chart-filter-bar svg {
|
|
2675
|
+
width: 0.875rem;
|
|
2676
|
+
height: 0.875rem;
|
|
2677
|
+
color: #6366f1;
|
|
2678
|
+
}
|
|
2679
|
+
|
|
2680
|
+
.vpg-chart-clear-filters {
|
|
2681
|
+
margin-left: auto;
|
|
2682
|
+
padding: 0.25rem 0.5rem;
|
|
2683
|
+
font-size: 0.75rem;
|
|
2684
|
+
font-weight: 500;
|
|
2685
|
+
color: #4338ca;
|
|
2686
|
+
background: white;
|
|
2687
|
+
border: 1px solid #c7d2fe;
|
|
2688
|
+
border-radius: 0.25rem;
|
|
2689
|
+
cursor: pointer;
|
|
2690
|
+
transition: all 0.15s;
|
|
2691
|
+
}
|
|
2692
|
+
|
|
2693
|
+
.vpg-chart-clear-filters:hover {
|
|
2694
|
+
background: #e0e7ff;
|
|
2695
|
+
border-color: #a5b4fc;
|
|
2696
|
+
}
|
|
2697
|
+
|
|
2698
|
+
.vpg-chart-label {
|
|
2699
|
+
display: flex;
|
|
2700
|
+
align-items: center;
|
|
2701
|
+
gap: 0.375rem;
|
|
2702
|
+
font-weight: 600;
|
|
2703
|
+
color: #8b5cf6;
|
|
2704
|
+
}
|
|
2705
|
+
|
|
2706
|
+
/* Chart Builder */
|
|
2707
|
+
.vpg-chart-builder {
|
|
2708
|
+
display: flex;
|
|
2709
|
+
flex-direction: column;
|
|
2710
|
+
height: 100%;
|
|
2711
|
+
min-height: 400px;
|
|
2712
|
+
background: white;
|
|
2713
|
+
}
|
|
2714
|
+
|
|
2715
|
+
.vpg-chart-type-bar {
|
|
2716
|
+
display: flex;
|
|
2717
|
+
flex-wrap: wrap;
|
|
2718
|
+
gap: 0.25rem;
|
|
2719
|
+
padding: 0.5rem 0.75rem;
|
|
2720
|
+
background: #f8fafc;
|
|
2721
|
+
border-bottom: 1px solid #e2e8f0;
|
|
2722
|
+
}
|
|
2723
|
+
|
|
2724
|
+
.vpg-chart-type-btn {
|
|
2725
|
+
display: flex;
|
|
2726
|
+
flex-direction: column;
|
|
2727
|
+
align-items: center;
|
|
2728
|
+
gap: 0.125rem;
|
|
2729
|
+
padding: 0.375rem 0.5rem;
|
|
2730
|
+
min-width: 3rem;
|
|
2731
|
+
border: 1px solid transparent;
|
|
2732
|
+
border-radius: 0.375rem;
|
|
2733
|
+
background: transparent;
|
|
2734
|
+
color: #64748b;
|
|
2735
|
+
font-size: 0.625rem;
|
|
2736
|
+
cursor: pointer;
|
|
2737
|
+
transition: all 0.15s;
|
|
2738
|
+
}
|
|
2739
|
+
|
|
2740
|
+
.vpg-chart-type-btn:hover {
|
|
2741
|
+
background: #f1f5f9;
|
|
2742
|
+
border-color: #e2e8f0;
|
|
2743
|
+
}
|
|
2744
|
+
|
|
2745
|
+
.vpg-chart-type-btn.active {
|
|
2746
|
+
background: #8b5cf6;
|
|
2747
|
+
border-color: #7c3aed;
|
|
2748
|
+
color: white;
|
|
2749
|
+
}
|
|
2750
|
+
|
|
2751
|
+
.vpg-chart-type-label {
|
|
2752
|
+
white-space: nowrap;
|
|
2753
|
+
overflow: hidden;
|
|
2754
|
+
text-overflow: ellipsis;
|
|
2755
|
+
max-width: 100%;
|
|
2756
|
+
}
|
|
2757
|
+
|
|
2758
|
+
/* Chart Builder Content */
|
|
2759
|
+
.vpg-chart-builder-content {
|
|
2760
|
+
flex: 1;
|
|
2761
|
+
display: flex;
|
|
2762
|
+
overflow: hidden;
|
|
2763
|
+
}
|
|
2764
|
+
|
|
2765
|
+
/* Fields Panel */
|
|
2766
|
+
.vpg-chart-fields-panel {
|
|
2767
|
+
width: 200px;
|
|
2768
|
+
flex-shrink: 0;
|
|
2769
|
+
display: flex;
|
|
2770
|
+
flex-direction: column;
|
|
2771
|
+
border-right: 1px solid #e2e8f0;
|
|
2772
|
+
background: #fafbfc;
|
|
2773
|
+
overflow-y: auto;
|
|
2774
|
+
}
|
|
2775
|
+
|
|
2776
|
+
.vpg-chart-fields-section {
|
|
2777
|
+
padding: 0.75rem;
|
|
2778
|
+
border-bottom: 1px solid #e2e8f0;
|
|
2779
|
+
}
|
|
2780
|
+
|
|
2781
|
+
.vpg-chart-fields-title {
|
|
2782
|
+
display: flex;
|
|
2783
|
+
align-items: center;
|
|
2784
|
+
gap: 0.375rem;
|
|
2785
|
+
font-size: 0.625rem;
|
|
2786
|
+
font-weight: 700;
|
|
2787
|
+
color: #64748b;
|
|
2788
|
+
text-transform: uppercase;
|
|
2789
|
+
letter-spacing: 0.05em;
|
|
2790
|
+
margin: 0 0 0.5rem 0;
|
|
2791
|
+
}
|
|
2792
|
+
|
|
2793
|
+
.vpg-chart-fields-hint {
|
|
2794
|
+
font-weight: 400;
|
|
2795
|
+
text-transform: none;
|
|
2796
|
+
color: #94a3b8;
|
|
2797
|
+
margin-left: 0.25rem;
|
|
2798
|
+
}
|
|
2799
|
+
|
|
2800
|
+
.vpg-chart-fields-list {
|
|
2801
|
+
display: flex;
|
|
2802
|
+
flex-direction: column;
|
|
2803
|
+
gap: 0.25rem;
|
|
2804
|
+
}
|
|
2805
|
+
|
|
2806
|
+
.vpg-chart-field-chip {
|
|
2807
|
+
display: flex;
|
|
2808
|
+
align-items: center;
|
|
2809
|
+
justify-content: space-between;
|
|
2810
|
+
padding: 0.375rem 0.5rem;
|
|
2811
|
+
border-radius: 0.375rem;
|
|
2812
|
+
font-size: 0.75rem;
|
|
2813
|
+
cursor: grab;
|
|
2814
|
+
transition: all 0.15s;
|
|
2815
|
+
-webkit-user-select: none;
|
|
2816
|
+
-moz-user-select: none;
|
|
2817
|
+
user-select: none;
|
|
2818
|
+
}
|
|
2819
|
+
|
|
2820
|
+
.vpg-chart-field-chip:active { cursor: grabbing; }
|
|
2821
|
+
|
|
2822
|
+
.vpg-field-dimension {
|
|
2823
|
+
background: #eef2ff;
|
|
2824
|
+
border: 1px solid #c7d2fe;
|
|
2825
|
+
color: #4338ca;
|
|
2826
|
+
}
|
|
2827
|
+
|
|
2828
|
+
.vpg-field-dimension:hover {
|
|
2829
|
+
background: #e0e7ff;
|
|
2830
|
+
box-shadow: 0 2px 4px rgba(99, 102, 241, 0.15);
|
|
2831
|
+
}
|
|
2832
|
+
|
|
2833
|
+
.vpg-field-measure {
|
|
2834
|
+
background: #ecfdf5;
|
|
2835
|
+
border: 1px solid #a7f3d0;
|
|
2836
|
+
color: #047857;
|
|
2837
|
+
}
|
|
2838
|
+
|
|
2839
|
+
.vpg-field-measure:hover {
|
|
2840
|
+
background: #d1fae5;
|
|
2841
|
+
box-shadow: 0 2px 4px rgba(16, 185, 129, 0.15);
|
|
2842
|
+
}
|
|
2843
|
+
|
|
2844
|
+
.vpg-field-name {
|
|
2845
|
+
font-weight: 500;
|
|
2846
|
+
overflow: hidden;
|
|
2847
|
+
text-overflow: ellipsis;
|
|
2848
|
+
white-space: nowrap;
|
|
2849
|
+
}
|
|
2850
|
+
|
|
2851
|
+
.vpg-field-type {
|
|
2852
|
+
font-size: 0.625rem;
|
|
2853
|
+
opacity: 0.7;
|
|
2854
|
+
flex-shrink: 0;
|
|
2855
|
+
}
|
|
2856
|
+
|
|
2857
|
+
.vpg-chart-fields-empty {
|
|
2858
|
+
font-size: 0.75rem;
|
|
2859
|
+
color: #94a3b8;
|
|
2860
|
+
font-style: italic;
|
|
2861
|
+
padding: 0.5rem;
|
|
2862
|
+
text-align: center;
|
|
2863
|
+
}
|
|
2864
|
+
|
|
2865
|
+
/* Config Panel (drop zones) */
|
|
2866
|
+
.vpg-chart-config-panel {
|
|
2867
|
+
width: 220px;
|
|
2868
|
+
flex-shrink: 0;
|
|
2869
|
+
display: flex;
|
|
2870
|
+
flex-direction: column;
|
|
2871
|
+
gap: 0.75rem;
|
|
2872
|
+
padding: 0.75rem;
|
|
2873
|
+
border-right: 1px solid #e2e8f0;
|
|
2874
|
+
background: white;
|
|
2875
|
+
overflow-y: auto;
|
|
2876
|
+
}
|
|
2877
|
+
|
|
2878
|
+
.vpg-chart-drop-zone-wrapper {
|
|
2879
|
+
display: flex;
|
|
2880
|
+
flex-direction: column;
|
|
2881
|
+
gap: 0.25rem;
|
|
2882
|
+
}
|
|
2883
|
+
|
|
2884
|
+
.vpg-chart-zone-label {
|
|
2885
|
+
font-size: 0.625rem;
|
|
2886
|
+
font-weight: 600;
|
|
2887
|
+
color: #64748b;
|
|
2888
|
+
text-transform: uppercase;
|
|
2889
|
+
letter-spacing: 0.05em;
|
|
2890
|
+
}
|
|
2891
|
+
|
|
2892
|
+
.vpg-chart-drop-zone {
|
|
2893
|
+
display: flex;
|
|
2894
|
+
align-items: center;
|
|
2895
|
+
justify-content: center;
|
|
2896
|
+
gap: 0.5rem;
|
|
2897
|
+
min-height: 2.25rem;
|
|
2898
|
+
padding: 0.5rem;
|
|
2899
|
+
border: 2px dashed #e2e8f0;
|
|
2900
|
+
border-radius: 0.5rem;
|
|
2901
|
+
background: #fafbfc;
|
|
2902
|
+
transition: all 0.2s;
|
|
2903
|
+
}
|
|
2904
|
+
|
|
2905
|
+
.vpg-chart-drop-zone.drag-over {
|
|
2906
|
+
border-color: #8b5cf6;
|
|
2907
|
+
background: #f5f3ff;
|
|
2908
|
+
box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1);
|
|
2909
|
+
}
|
|
2910
|
+
|
|
2911
|
+
.vpg-chart-drop-zone.has-field {
|
|
2912
|
+
border-style: solid;
|
|
2913
|
+
border-color: #8b5cf6;
|
|
2914
|
+
background: #f5f3ff;
|
|
2915
|
+
justify-content: space-between;
|
|
2916
|
+
}
|
|
2917
|
+
|
|
2918
|
+
.vpg-zone-placeholder {
|
|
2919
|
+
font-size: 0.6875rem;
|
|
2920
|
+
color: #94a3b8;
|
|
2921
|
+
}
|
|
2922
|
+
|
|
2923
|
+
.vpg-zone-field-name {
|
|
2924
|
+
font-size: 0.75rem;
|
|
2925
|
+
font-weight: 500;
|
|
2926
|
+
color: #5b21b6;
|
|
2927
|
+
overflow: hidden;
|
|
2928
|
+
text-overflow: ellipsis;
|
|
2929
|
+
white-space: nowrap;
|
|
2930
|
+
}
|
|
2931
|
+
|
|
2932
|
+
.vpg-zone-aggregation {
|
|
2933
|
+
font-size: 0.625rem;
|
|
2934
|
+
padding: 0.125rem 0.25rem;
|
|
2935
|
+
border: 1px solid #ddd6fe;
|
|
2936
|
+
border-radius: 0.25rem;
|
|
2937
|
+
background: white;
|
|
2938
|
+
color: #6d28d9;
|
|
2939
|
+
cursor: pointer;
|
|
2940
|
+
}
|
|
2941
|
+
|
|
2942
|
+
.vpg-zone-remove-btn {
|
|
2943
|
+
display: flex;
|
|
2944
|
+
align-items: center;
|
|
2945
|
+
justify-content: center;
|
|
2946
|
+
width: 1.25rem;
|
|
2947
|
+
height: 1.25rem;
|
|
2948
|
+
border: none;
|
|
2949
|
+
border-radius: 0.25rem;
|
|
2950
|
+
background: transparent;
|
|
2951
|
+
color: #a78bfa;
|
|
2952
|
+
cursor: pointer;
|
|
2953
|
+
transition: all 0.15s;
|
|
2954
|
+
flex-shrink: 0;
|
|
2955
|
+
}
|
|
2956
|
+
|
|
2957
|
+
.vpg-zone-remove-btn:hover {
|
|
2958
|
+
background: #ede9fe;
|
|
2959
|
+
color: #7c3aed;
|
|
2960
|
+
}
|
|
2961
|
+
|
|
2962
|
+
.vpg-zone-optional {
|
|
2963
|
+
opacity: 0.7;
|
|
2964
|
+
}
|
|
2965
|
+
|
|
2966
|
+
.vpg-zone-optional.has-field { opacity: 1; }
|
|
2967
|
+
|
|
2968
|
+
/* Chart Guidance */
|
|
2969
|
+
.vpg-chart-guidance {
|
|
2970
|
+
display: flex;
|
|
2971
|
+
align-items: flex-start;
|
|
2972
|
+
gap: 0.5rem;
|
|
2973
|
+
padding: 0.625rem;
|
|
2974
|
+
margin-top: auto;
|
|
2975
|
+
background: #f1f5f9;
|
|
2976
|
+
border-radius: 0.5rem;
|
|
2977
|
+
font-size: 0.6875rem;
|
|
2978
|
+
color: #475569;
|
|
2979
|
+
line-height: 1.4;
|
|
2980
|
+
}
|
|
2981
|
+
|
|
2982
|
+
.vpg-chart-guidance svg {
|
|
2983
|
+
flex-shrink: 0;
|
|
2984
|
+
margin-top: 0.125rem;
|
|
2985
|
+
color: #8b5cf6;
|
|
2986
|
+
}
|
|
2987
|
+
|
|
2988
|
+
/* Chart Preview */
|
|
2989
|
+
.vpg-chart-preview-panel {
|
|
2990
|
+
flex: 1;
|
|
2991
|
+
display: flex;
|
|
2992
|
+
flex-direction: column;
|
|
2993
|
+
background: white;
|
|
2994
|
+
overflow: hidden;
|
|
2995
|
+
}
|
|
2996
|
+
|
|
2997
|
+
.vpg-chart-container {
|
|
2998
|
+
flex: 1;
|
|
2999
|
+
padding: 1rem;
|
|
3000
|
+
min-height: 300px;
|
|
3001
|
+
}
|
|
3002
|
+
|
|
3003
|
+
.vpg-chart-empty-state {
|
|
3004
|
+
flex: 1;
|
|
3005
|
+
display: flex;
|
|
3006
|
+
flex-direction: column;
|
|
3007
|
+
align-items: center;
|
|
3008
|
+
justify-content: center;
|
|
3009
|
+
gap: 0.75rem;
|
|
3010
|
+
padding: 2rem;
|
|
3011
|
+
text-align: center;
|
|
3012
|
+
color: #64748b;
|
|
3013
|
+
}
|
|
3014
|
+
|
|
3015
|
+
.vpg-chart-empty-state .vpg-icon-lg {
|
|
3016
|
+
width: 4rem;
|
|
3017
|
+
height: 4rem;
|
|
3018
|
+
color: #cbd5e1;
|
|
3019
|
+
}
|
|
3020
|
+
|
|
3021
|
+
.vpg-chart-empty-state h3 {
|
|
3022
|
+
margin: 0;
|
|
3023
|
+
font-size: 1rem;
|
|
3024
|
+
font-weight: 600;
|
|
3025
|
+
color: #475569;
|
|
3026
|
+
}
|
|
3027
|
+
|
|
3028
|
+
.vpg-chart-empty-state p {
|
|
3029
|
+
margin: 0;
|
|
3030
|
+
font-size: 0.875rem;
|
|
3031
|
+
color: #94a3b8;
|
|
3032
|
+
max-width: 280px;
|
|
3033
|
+
}
|
|
3034
|
+
|
|
3035
|
+
.vpg-chart-hint {
|
|
3036
|
+
margin-top: 0.5rem;
|
|
3037
|
+
padding: 0.75rem 1rem;
|
|
3038
|
+
background: #f8fafc;
|
|
3039
|
+
border-radius: 0.5rem;
|
|
3040
|
+
font-size: 0.75rem;
|
|
3041
|
+
color: #64748b;
|
|
3042
|
+
max-width: 320px;
|
|
3043
|
+
}
|
|
3044
|
+
|
|
3045
|
+
.vpg-chart-hint strong {
|
|
3046
|
+
color: #8b5cf6;
|
|
3047
|
+
}
|
|
3048
|
+
|
|
3049
|
+
/* Dark mode support */
|
|
3050
|
+
.vpg-theme-dark .vpg-chart-filter-bar { background: #1e1b4b; border-color: #4c1d95; color: #a5b4fc; }
|
|
3051
|
+
.vpg-theme-dark .vpg-chart-filter-bar svg { color: #8b5cf6; }
|
|
3052
|
+
.vpg-theme-dark .vpg-chart-clear-filters { background: #312e81; border-color: #4c1d95; color: #c4b5fd; }
|
|
3053
|
+
.vpg-theme-dark .vpg-chart-clear-filters:hover { background: #3730a3; border-color: #6366f1; }
|
|
3054
|
+
.vpg-theme-dark .vpg-chart-builder { background: #0f172a; }
|
|
3055
|
+
.vpg-theme-dark .vpg-chart-type-bar { background: #1e293b; border-color: #334155; }
|
|
3056
|
+
.vpg-theme-dark .vpg-chart-type-btn { color: #94a3b8; }
|
|
3057
|
+
.vpg-theme-dark .vpg-chart-type-btn:hover { background: #334155; border-color: #475569; }
|
|
3058
|
+
.vpg-theme-dark .vpg-chart-fields-panel { background: #1e293b; border-color: #334155; }
|
|
3059
|
+
.vpg-theme-dark .vpg-chart-fields-section { border-color: #334155; }
|
|
3060
|
+
.vpg-theme-dark .vpg-chart-fields-title { color: #94a3b8; }
|
|
3061
|
+
.vpg-theme-dark .vpg-field-dimension { background: #312e81; border-color: #4338ca; color: #a5b4fc; }
|
|
3062
|
+
.vpg-theme-dark .vpg-field-measure { background: #064e3b; border-color: #059669; color: #6ee7b7; }
|
|
3063
|
+
.vpg-theme-dark .vpg-chart-config-panel { background: #0f172a; border-color: #334155; }
|
|
3064
|
+
.vpg-theme-dark .vpg-chart-zone-label { color: #94a3b8; }
|
|
3065
|
+
.vpg-theme-dark .vpg-chart-drop-zone { border-color: #334155; background: #1e293b; }
|
|
3066
|
+
.vpg-theme-dark .vpg-chart-drop-zone.drag-over { border-color: #8b5cf6; background: #1e1b4b; }
|
|
3067
|
+
.vpg-theme-dark .vpg-chart-drop-zone.has-field { background: #1e1b4b; border-color: #7c3aed; }
|
|
3068
|
+
.vpg-theme-dark .vpg-zone-placeholder { color: #64748b; }
|
|
3069
|
+
.vpg-theme-dark .vpg-zone-field-name { color: #c4b5fd; }
|
|
3070
|
+
.vpg-theme-dark .vpg-zone-aggregation { background: #1e1b4b; border-color: #4c1d95; color: #c4b5fd; }
|
|
3071
|
+
.vpg-theme-dark .vpg-zone-remove-btn { color: #a78bfa; }
|
|
3072
|
+
.vpg-theme-dark .vpg-zone-remove-btn:hover { background: #312e81; }
|
|
3073
|
+
.vpg-theme-dark .vpg-chart-guidance { background: #1e293b; color: #94a3b8; }
|
|
3074
|
+
.vpg-theme-dark .vpg-chart-preview-panel { background: #0f172a; }
|
|
3075
|
+
.vpg-theme-dark .vpg-chart-empty-state { color: #94a3b8; }
|
|
3076
|
+
.vpg-theme-dark .vpg-chart-empty-state .vpg-icon-lg { color: #475569; }
|
|
3077
|
+
.vpg-theme-dark .vpg-chart-empty-state h3 { color: #e2e8f0; }
|
|
3078
|
+
.vpg-theme-dark .vpg-chart-empty-state p { color: #64748b; }
|
|
3079
|
+
.vpg-theme-dark .vpg-chart-hint { background: #1e293b; color: #94a3b8; }
|
|
3080
|
+
|
|
3081
|
+
/* ==========================================================================
|
|
3082
|
+
ApexCharts Tooltip Overrides
|
|
3083
|
+
========================================================================== */
|
|
3084
|
+
/* Light mode tooltip - ensure dark text for better contrast */
|
|
3085
|
+
.apexcharts-tooltip.apexcharts-theme-light {
|
|
3086
|
+
color: #1e293b !important;
|
|
3087
|
+
}
|
|
3088
|
+
|
|
3089
|
+
.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
|
|
3090
|
+
color: #0f172a !important;
|
|
3091
|
+
background: #f1f5f9 !important;
|
|
3092
|
+
border-bottom-color: #e2e8f0 !important;
|
|
3093
|
+
}
|
|
3094
|
+
|
|
3095
|
+
.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-series-group {
|
|
3096
|
+
color: #334155 !important;
|
|
3097
|
+
}
|
|
3098
|
+
|
|
3099
|
+
.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-text-y-label,
|
|
3100
|
+
.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-text-y-value {
|
|
3101
|
+
color: #1e293b !important;
|
|
3102
|
+
}
|
|
3103
|
+
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@smallwebco/tinypivot-react",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.53",
|
|
5
5
|
"description": "TinyPivot React - Excel-like data grid and pivot table components",
|
|
6
6
|
"author": "Small Web, LLC",
|
|
7
7
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
@@ -56,7 +56,9 @@
|
|
|
56
56
|
},
|
|
57
57
|
"dependencies": {
|
|
58
58
|
"@tanstack/react-table": "^8.20.0",
|
|
59
|
-
"
|
|
59
|
+
"apexcharts": "^4.3.0",
|
|
60
|
+
"react-apexcharts": "^1.6.0",
|
|
61
|
+
"@smallwebco/tinypivot-core": "1.0.53"
|
|
60
62
|
},
|
|
61
63
|
"devDependencies": {
|
|
62
64
|
"@types/react": "^18.2.0",
|