@smallwebco/tinypivot-react 1.0.50 → 1.0.52

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/style.css CHANGED
@@ -2632,3 +2632,442 @@
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-list {
2794
+ display: flex;
2795
+ flex-direction: column;
2796
+ gap: 0.25rem;
2797
+ }
2798
+
2799
+ .vpg-chart-field-chip {
2800
+ display: flex;
2801
+ align-items: center;
2802
+ justify-content: space-between;
2803
+ padding: 0.375rem 0.5rem;
2804
+ border-radius: 0.375rem;
2805
+ font-size: 0.75rem;
2806
+ cursor: grab;
2807
+ transition: all 0.15s;
2808
+ -webkit-user-select: none;
2809
+ -moz-user-select: none;
2810
+ user-select: none;
2811
+ }
2812
+
2813
+ .vpg-chart-field-chip:active { cursor: grabbing; }
2814
+
2815
+ .vpg-field-dimension {
2816
+ background: #eef2ff;
2817
+ border: 1px solid #c7d2fe;
2818
+ color: #4338ca;
2819
+ }
2820
+
2821
+ .vpg-field-dimension:hover {
2822
+ background: #e0e7ff;
2823
+ box-shadow: 0 2px 4px rgba(99, 102, 241, 0.15);
2824
+ }
2825
+
2826
+ .vpg-field-measure {
2827
+ background: #ecfdf5;
2828
+ border: 1px solid #a7f3d0;
2829
+ color: #047857;
2830
+ }
2831
+
2832
+ .vpg-field-measure:hover {
2833
+ background: #d1fae5;
2834
+ box-shadow: 0 2px 4px rgba(16, 185, 129, 0.15);
2835
+ }
2836
+
2837
+ .vpg-field-name {
2838
+ font-weight: 500;
2839
+ overflow: hidden;
2840
+ text-overflow: ellipsis;
2841
+ white-space: nowrap;
2842
+ }
2843
+
2844
+ .vpg-field-type {
2845
+ font-size: 0.625rem;
2846
+ opacity: 0.7;
2847
+ flex-shrink: 0;
2848
+ }
2849
+
2850
+ .vpg-chart-fields-empty {
2851
+ font-size: 0.75rem;
2852
+ color: #94a3b8;
2853
+ font-style: italic;
2854
+ padding: 0.5rem;
2855
+ text-align: center;
2856
+ }
2857
+
2858
+ /* Config Panel (drop zones) */
2859
+ .vpg-chart-config-panel {
2860
+ width: 220px;
2861
+ flex-shrink: 0;
2862
+ display: flex;
2863
+ flex-direction: column;
2864
+ gap: 0.75rem;
2865
+ padding: 0.75rem;
2866
+ border-right: 1px solid #e2e8f0;
2867
+ background: white;
2868
+ overflow-y: auto;
2869
+ }
2870
+
2871
+ .vpg-chart-drop-zone-wrapper {
2872
+ display: flex;
2873
+ flex-direction: column;
2874
+ gap: 0.25rem;
2875
+ }
2876
+
2877
+ .vpg-chart-zone-label {
2878
+ font-size: 0.625rem;
2879
+ font-weight: 600;
2880
+ color: #64748b;
2881
+ text-transform: uppercase;
2882
+ letter-spacing: 0.05em;
2883
+ }
2884
+
2885
+ .vpg-chart-drop-zone {
2886
+ display: flex;
2887
+ align-items: center;
2888
+ justify-content: center;
2889
+ gap: 0.5rem;
2890
+ min-height: 2.25rem;
2891
+ padding: 0.5rem;
2892
+ border: 2px dashed #e2e8f0;
2893
+ border-radius: 0.5rem;
2894
+ background: #fafbfc;
2895
+ transition: all 0.2s;
2896
+ }
2897
+
2898
+ .vpg-chart-drop-zone.drag-over {
2899
+ border-color: #8b5cf6;
2900
+ background: #f5f3ff;
2901
+ box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1);
2902
+ }
2903
+
2904
+ .vpg-chart-drop-zone.has-field {
2905
+ border-style: solid;
2906
+ border-color: #8b5cf6;
2907
+ background: #f5f3ff;
2908
+ justify-content: space-between;
2909
+ }
2910
+
2911
+ .vpg-zone-placeholder {
2912
+ font-size: 0.6875rem;
2913
+ color: #94a3b8;
2914
+ }
2915
+
2916
+ .vpg-zone-field-name {
2917
+ font-size: 0.75rem;
2918
+ font-weight: 500;
2919
+ color: #5b21b6;
2920
+ overflow: hidden;
2921
+ text-overflow: ellipsis;
2922
+ white-space: nowrap;
2923
+ }
2924
+
2925
+ .vpg-zone-aggregation {
2926
+ font-size: 0.625rem;
2927
+ padding: 0.125rem 0.25rem;
2928
+ border: 1px solid #ddd6fe;
2929
+ border-radius: 0.25rem;
2930
+ background: white;
2931
+ color: #6d28d9;
2932
+ cursor: pointer;
2933
+ }
2934
+
2935
+ .vpg-zone-remove-btn {
2936
+ display: flex;
2937
+ align-items: center;
2938
+ justify-content: center;
2939
+ width: 1.25rem;
2940
+ height: 1.25rem;
2941
+ border: none;
2942
+ border-radius: 0.25rem;
2943
+ background: transparent;
2944
+ color: #a78bfa;
2945
+ cursor: pointer;
2946
+ transition: all 0.15s;
2947
+ flex-shrink: 0;
2948
+ }
2949
+
2950
+ .vpg-zone-remove-btn:hover {
2951
+ background: #ede9fe;
2952
+ color: #7c3aed;
2953
+ }
2954
+
2955
+ .vpg-zone-optional {
2956
+ opacity: 0.7;
2957
+ }
2958
+
2959
+ .vpg-zone-optional.has-field { opacity: 1; }
2960
+
2961
+ /* Chart Guidance */
2962
+ .vpg-chart-guidance {
2963
+ display: flex;
2964
+ align-items: flex-start;
2965
+ gap: 0.5rem;
2966
+ padding: 0.625rem;
2967
+ margin-top: auto;
2968
+ background: #f1f5f9;
2969
+ border-radius: 0.5rem;
2970
+ font-size: 0.6875rem;
2971
+ color: #475569;
2972
+ line-height: 1.4;
2973
+ }
2974
+
2975
+ .vpg-chart-guidance svg {
2976
+ flex-shrink: 0;
2977
+ margin-top: 0.125rem;
2978
+ color: #8b5cf6;
2979
+ }
2980
+
2981
+ /* Chart Preview */
2982
+ .vpg-chart-preview-panel {
2983
+ flex: 1;
2984
+ display: flex;
2985
+ flex-direction: column;
2986
+ background: white;
2987
+ overflow: hidden;
2988
+ }
2989
+
2990
+ .vpg-chart-container {
2991
+ flex: 1;
2992
+ padding: 1rem;
2993
+ min-height: 300px;
2994
+ }
2995
+
2996
+ .vpg-chart-empty-state {
2997
+ flex: 1;
2998
+ display: flex;
2999
+ flex-direction: column;
3000
+ align-items: center;
3001
+ justify-content: center;
3002
+ gap: 0.75rem;
3003
+ padding: 2rem;
3004
+ text-align: center;
3005
+ color: #64748b;
3006
+ }
3007
+
3008
+ .vpg-chart-empty-state .vpg-icon-lg {
3009
+ width: 4rem;
3010
+ height: 4rem;
3011
+ color: #cbd5e1;
3012
+ }
3013
+
3014
+ .vpg-chart-empty-state h3 {
3015
+ margin: 0;
3016
+ font-size: 1rem;
3017
+ font-weight: 600;
3018
+ color: #475569;
3019
+ }
3020
+
3021
+ .vpg-chart-empty-state p {
3022
+ margin: 0;
3023
+ font-size: 0.875rem;
3024
+ color: #94a3b8;
3025
+ max-width: 280px;
3026
+ }
3027
+
3028
+ .vpg-chart-hint {
3029
+ margin-top: 0.5rem;
3030
+ padding: 0.75rem 1rem;
3031
+ background: #f8fafc;
3032
+ border-radius: 0.5rem;
3033
+ font-size: 0.75rem;
3034
+ color: #64748b;
3035
+ max-width: 320px;
3036
+ }
3037
+
3038
+ .vpg-chart-hint strong {
3039
+ color: #8b5cf6;
3040
+ }
3041
+
3042
+ /* Dark mode support */
3043
+ .vpg-theme-dark .vpg-chart-filter-bar { background: #1e1b4b; border-color: #4c1d95; color: #a5b4fc; }
3044
+ .vpg-theme-dark .vpg-chart-filter-bar svg { color: #8b5cf6; }
3045
+ .vpg-theme-dark .vpg-chart-clear-filters { background: #312e81; border-color: #4c1d95; color: #c4b5fd; }
3046
+ .vpg-theme-dark .vpg-chart-clear-filters:hover { background: #3730a3; border-color: #6366f1; }
3047
+ .vpg-theme-dark .vpg-chart-builder { background: #0f172a; }
3048
+ .vpg-theme-dark .vpg-chart-type-bar { background: #1e293b; border-color: #334155; }
3049
+ .vpg-theme-dark .vpg-chart-type-btn { color: #94a3b8; }
3050
+ .vpg-theme-dark .vpg-chart-type-btn:hover { background: #334155; border-color: #475569; }
3051
+ .vpg-theme-dark .vpg-chart-fields-panel { background: #1e293b; border-color: #334155; }
3052
+ .vpg-theme-dark .vpg-chart-fields-section { border-color: #334155; }
3053
+ .vpg-theme-dark .vpg-chart-fields-title { color: #94a3b8; }
3054
+ .vpg-theme-dark .vpg-field-dimension { background: #312e81; border-color: #4338ca; color: #a5b4fc; }
3055
+ .vpg-theme-dark .vpg-field-measure { background: #064e3b; border-color: #059669; color: #6ee7b7; }
3056
+ .vpg-theme-dark .vpg-chart-config-panel { background: #0f172a; border-color: #334155; }
3057
+ .vpg-theme-dark .vpg-chart-zone-label { color: #94a3b8; }
3058
+ .vpg-theme-dark .vpg-chart-drop-zone { border-color: #334155; background: #1e293b; }
3059
+ .vpg-theme-dark .vpg-chart-drop-zone.drag-over { border-color: #8b5cf6; background: #1e1b4b; }
3060
+ .vpg-theme-dark .vpg-chart-drop-zone.has-field { background: #1e1b4b; border-color: #7c3aed; }
3061
+ .vpg-theme-dark .vpg-zone-placeholder { color: #64748b; }
3062
+ .vpg-theme-dark .vpg-zone-field-name { color: #c4b5fd; }
3063
+ .vpg-theme-dark .vpg-zone-aggregation { background: #1e1b4b; border-color: #4c1d95; color: #c4b5fd; }
3064
+ .vpg-theme-dark .vpg-zone-remove-btn { color: #a78bfa; }
3065
+ .vpg-theme-dark .vpg-zone-remove-btn:hover { background: #312e81; }
3066
+ .vpg-theme-dark .vpg-chart-guidance { background: #1e293b; color: #94a3b8; }
3067
+ .vpg-theme-dark .vpg-chart-preview-panel { background: #0f172a; }
3068
+ .vpg-theme-dark .vpg-chart-empty-state { color: #94a3b8; }
3069
+ .vpg-theme-dark .vpg-chart-empty-state .vpg-icon-lg { color: #475569; }
3070
+ .vpg-theme-dark .vpg-chart-empty-state h3 { color: #e2e8f0; }
3071
+ .vpg-theme-dark .vpg-chart-empty-state p { color: #64748b; }
3072
+ .vpg-theme-dark .vpg-chart-hint { background: #1e293b; color: #94a3b8; }
3073
+
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@smallwebco/tinypivot-react",
3
3
  "type": "module",
4
- "version": "1.0.50",
4
+ "version": "1.0.52",
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
- "@smallwebco/tinypivot-core": "1.0.50"
59
+ "apexcharts": "^4.3.0",
60
+ "react-apexcharts": "^1.6.0",
61
+ "@smallwebco/tinypivot-core": "1.0.52"
60
62
  },
61
63
  "devDependencies": {
62
64
  "@types/react": "^18.2.0",