anchi-kit 1.2.0 → 1.2.2

package/.cursor/skills/ui-styling/scripts/tests/test_shadcn_add.py

@@ -1,266 +0,0 @@
-"""Tests for shadcn_add.py"""
-
-import json
-import subprocess
-from pathlib import Path
-from unittest.mock import MagicMock, mock_open, patch
-
-import pytest
-
-# Add parent directory to path for imports
-import sys
-sys.path.insert(0, str(Path(__file__).parent.parent))
-
-from shadcn_add import ShadcnInstaller
-
-
-class TestShadcnInstaller:
-    """Test ShadcnInstaller class."""
-
-    @pytest.fixture
-    def temp_project(self, tmp_path):
-        """Create temporary project structure."""
-        project_root = tmp_path / "test-project"
-        project_root.mkdir()
-
-        # Create components.json
-        components_json = project_root / "components.json"
-        components_json.write_text(
-            json.dumps({
-                "style": "new-york",
-                "aliases": {
-                    "components": "@/components",
-                    "utils": "@/lib/utils"
-                }
-            })
-        )
-
-        # Create components directory
-        ui_dir = project_root / "components" / "ui"
-        ui_dir.mkdir(parents=True)
-
-        return project_root
-
-    def test_init_default_project_root(self):
-        """Test initialization with default project root."""
-        installer = ShadcnInstaller()
-        assert installer.project_root == Path.cwd()
-        assert installer.dry_run is False
-
-    def test_init_custom_project_root(self, tmp_path):
-        """Test initialization with custom project root."""
-        installer = ShadcnInstaller(project_root=tmp_path)
-        assert installer.project_root == tmp_path
-
-    def test_init_dry_run(self):
-        """Test initialization with dry run mode."""
-        installer = ShadcnInstaller(dry_run=True)
-        assert installer.dry_run is True
-
-    def test_check_shadcn_config_exists(self, temp_project):
-        """Test checking for existing shadcn config."""
-        installer = ShadcnInstaller(project_root=temp_project)
-        assert installer.check_shadcn_config() is True
-
-    def test_check_shadcn_config_not_exists(self, tmp_path):
-        """Test checking for non-existent shadcn config."""
-        installer = ShadcnInstaller(project_root=tmp_path)
-        assert installer.check_shadcn_config() is False
-
-    def test_get_installed_components_empty(self, temp_project):
-        """Test getting installed components when none exist."""
-        installer = ShadcnInstaller(project_root=temp_project)
-        installed = installer.get_installed_components()
-        assert installed == []
-
-    def test_get_installed_components_with_files(self, temp_project):
-        """Test getting installed components when files exist."""
-        ui_dir = temp_project / "components" / "ui"
-
-        # Create component files
-        (ui_dir / "button.tsx").write_text("export const Button = () => {}")
-        (ui_dir / "card.tsx").write_text("export const Card = () => {}")
-
-        installer = ShadcnInstaller(project_root=temp_project)
-        installed = installer.get_installed_components()
-
-        assert sorted(installed) == ["button", "card"]
-
-    def test_get_installed_components_no_config(self, tmp_path):
-        """Test getting installed components without config."""
-        installer = ShadcnInstaller(project_root=tmp_path)
-        installed = installer.get_installed_components()
-        assert installed == []
-
-    def test_add_components_no_components(self, temp_project):
-        """Test adding components with empty list."""
-        installer = ShadcnInstaller(project_root=temp_project)
-        success, message = installer.add_components([])
-
-        assert success is False
-        assert "No components specified" in message
-
-    def test_add_components_no_config(self, tmp_path):
-        """Test adding components without shadcn config."""
-        installer = ShadcnInstaller(project_root=tmp_path)
-        success, message = installer.add_components(["button"])
-
-        assert success is False
-        assert "not initialized" in message
-
-    def test_add_components_already_installed(self, temp_project):
-        """Test adding components that are already installed."""
-        ui_dir = temp_project / "components" / "ui"
-        (ui_dir / "button.tsx").write_text("export const Button = () => {}")
-
-        installer = ShadcnInstaller(project_root=temp_project)
-        success, message = installer.add_components(["button"])
-
-        assert success is False
-        assert "already installed" in message
-        assert "button" in message
-
-    def test_add_components_with_overwrite(self, temp_project):
-        """Test adding components with overwrite flag."""
-        ui_dir = temp_project / "components" / "ui"
-        (ui_dir / "button.tsx").write_text("export const Button = () => {}")
-
-        installer = ShadcnInstaller(project_root=temp_project)
-
-        with patch("subprocess.run") as mock_run:
-            mock_run.return_value = MagicMock(
-                stdout="Component added successfully",
-                returncode=0
-            )
-
-            success, message = installer.add_components(["button"], overwrite=True)
-
-            assert success is True
-            assert "Successfully added" in message
-            mock_run.assert_called_once()
-
-            # Verify --overwrite flag was passed
-            call_args = mock_run.call_args[0][0]
-            assert "--overwrite" in call_args
-
-    def test_add_components_dry_run(self, temp_project):
-        """Test adding components in dry run mode."""
-        installer = ShadcnInstaller(project_root=temp_project, dry_run=True)
-        success, message = installer.add_components(["button", "card"])
-
-        assert success is True
-        assert "Would run:" in message
-        assert "button" in message
-        assert "card" in message
-
-    @patch("subprocess.run")
-    def test_add_components_success(self, mock_run, temp_project):
-        """Test successful component addition."""
-        mock_run.return_value = MagicMock(
-            stdout="Components added successfully",
-            stderr="",
-            returncode=0
-        )
-
-        installer = ShadcnInstaller(project_root=temp_project)
-        success, message = installer.add_components(["button", "card"])
-
-        assert success is True
-        assert "Successfully added" in message
-        assert "button" in message
-        assert "card" in message
-
-        # Verify correct command was called
-        mock_run.assert_called_once()
-        call_args = mock_run.call_args[0][0]
-        assert call_args[:3] == ["npx", "shadcn@latest", "add"]
-        assert "button" in call_args
-        assert "card" in call_args
-
-    @patch("subprocess.run")
-    def test_add_components_subprocess_error(self, mock_run, temp_project):
-        """Test component addition with subprocess error."""
-        mock_run.side_effect = subprocess.CalledProcessError(
-            1, "cmd", stderr="Error occurred"
-        )
-
-        installer = ShadcnInstaller(project_root=temp_project)
-        success, message = installer.add_components(["button"])
-
-        assert success is False
-        assert "Failed to add" in message
-
-    @patch("subprocess.run")
-    def test_add_components_npx_not_found(self, mock_run, temp_project):
-        """Test component addition when npx is not found."""
-        mock_run.side_effect = FileNotFoundError()
-
-        installer = ShadcnInstaller(project_root=temp_project)
-        success, message = installer.add_components(["button"])
-
-        assert success is False
-        assert "npx not found" in message
-
-    def test_add_all_components_no_config(self, tmp_path):
-        """Test adding all components without config."""
-        installer = ShadcnInstaller(project_root=tmp_path)
-        success, message = installer.add_all_components()
-
-        assert success is False
-        assert "not initialized" in message
-
-    def test_add_all_components_dry_run(self, temp_project):
-        """Test adding all components in dry run mode."""
-        installer = ShadcnInstaller(project_root=temp_project, dry_run=True)
-        success, message = installer.add_all_components()
-
-        assert success is True
-        assert "Would run:" in message
-        assert "--all" in message
-
-    @patch("subprocess.run")
-    def test_add_all_components_success(self, mock_run, temp_project):
-        """Test successful addition of all components."""
-        mock_run.return_value = MagicMock(
-            stdout="All components added",
-            returncode=0
-        )
-
-        installer = ShadcnInstaller(project_root=temp_project)
-        success, message = installer.add_all_components()
-
-        assert success is True
-        assert "Successfully added all" in message
-
-        # Verify --all flag was passed
-        call_args = mock_run.call_args[0][0]
-        assert "--all" in call_args
-
-    def test_list_installed_no_config(self, tmp_path):
-        """Test listing installed components without config."""
-        installer = ShadcnInstaller(project_root=tmp_path)
-        success, message = installer.list_installed()
-
-        assert success is False
-        assert "not initialized" in message
-
-    def test_list_installed_empty(self, temp_project):
-        """Test listing installed components when none exist."""
-        installer = ShadcnInstaller(project_root=temp_project)
-        success, message = installer.list_installed()
-
-        assert success is True
-        assert "No components installed" in message
-
-    def test_list_installed_with_components(self, temp_project):
-        """Test listing installed components when they exist."""
-        ui_dir = temp_project / "components" / "ui"
-        (ui_dir / "button.tsx").write_text("export const Button = () => {}")
-        (ui_dir / "card.tsx").write_text("export const Card = () => {}")
-
-        installer = ShadcnInstaller(project_root=temp_project)
-        success, message = installer.list_installed()
-
-        assert success is True
-        assert "button" in message
-        assert "card" in message

package/.cursor/skills/ui-styling/scripts/tests/test_tailwind_config_gen.py

@@ -1,336 +0,0 @@
-"""Tests for tailwind_config_gen.py"""
-
-from pathlib import Path
-
-import pytest
-
-# Add parent directory to path for imports
-import sys
-sys.path.insert(0, str(Path(__file__).parent.parent))
-
-from tailwind_config_gen import TailwindConfigGenerator
-
-
-class TestTailwindConfigGenerator:
-    """Test TailwindConfigGenerator class."""
-
-    def test_init_default_typescript(self):
-        """Test initialization with default settings."""
-        generator = TailwindConfigGenerator()
-        assert generator.typescript is True
-        assert generator.framework == "react"
-
-    def test_init_javascript(self):
-        """Test initialization for JavaScript config."""
-        generator = TailwindConfigGenerator(typescript=False)
-        assert generator.typescript is False
-
-    def test_init_framework(self):
-        """Test initialization with different frameworks."""
-        for framework in ["react", "vue", "svelte", "nextjs"]:
-            generator = TailwindConfigGenerator(framework=framework)
-            assert generator.framework == framework
-
-    def test_default_output_path_typescript(self):
-        """Test default output path for TypeScript."""
-        generator = TailwindConfigGenerator(typescript=True)
-        assert generator.output_path.name == "tailwind.config.ts"
-
-    def test_default_output_path_javascript(self):
-        """Test default output path for JavaScript."""
-        generator = TailwindConfigGenerator(typescript=False)
-        assert generator.output_path.name == "tailwind.config.js"
-
-    def test_custom_output_path(self, tmp_path):
-        """Test custom output path."""
-        custom_path = tmp_path / "custom-config.ts"
-        generator = TailwindConfigGenerator(output_path=custom_path)
-        assert generator.output_path == custom_path
-
-    def test_base_config_structure(self):
-        """Test base configuration structure."""
-        generator = TailwindConfigGenerator()
-        config = generator.config
-
-        assert "darkMode" in config
-        assert "content" in config
-        assert "theme" in config
-        assert "plugins" in config
-        assert "extend" in config["theme"]
-
-    def test_default_content_paths_react(self):
-        """Test default content paths for React."""
-        generator = TailwindConfigGenerator(framework="react")
-        paths = generator.config["content"]
-
-        assert any("src/**/*.{js,jsx,ts,tsx}" in p for p in paths)
-        assert any("index.html" in p for p in paths)
-
-    def test_default_content_paths_nextjs(self):
-        """Test default content paths for Next.js."""
-        generator = TailwindConfigGenerator(framework="nextjs")
-        paths = generator.config["content"]
-
-        assert any("app/**" in p for p in paths)
-        assert any("pages/**" in p for p in paths)
-        assert any("components/**" in p for p in paths)
-
-    def test_default_content_paths_vue(self):
-        """Test default content paths for Vue."""
-        generator = TailwindConfigGenerator(framework="vue")
-        paths = generator.config["content"]
-
-        assert any("vue" in p for p in paths)
-
-    def test_add_colors(self):
-        """Test adding custom colors."""
-        generator = TailwindConfigGenerator()
-        colors = {
-            "brand": "#3b82f6",
-            "accent": "#8b5cf6"
-        }
-        generator.add_colors(colors)
-
-        assert "colors" in generator.config["theme"]["extend"]
-        assert generator.config["theme"]["extend"]["colors"]["brand"] == "#3b82f6"
-        assert generator.config["theme"]["extend"]["colors"]["accent"] == "#8b5cf6"
-
-    def test_add_colors_multiple_times(self):
-        """Test adding colors multiple times."""
-        generator = TailwindConfigGenerator()
-
-        generator.add_colors({"brand": "#3b82f6"})
-        generator.add_colors({"accent": "#8b5cf6"})
-
-        colors = generator.config["theme"]["extend"]["colors"]
-        assert "brand" in colors
-        assert "accent" in colors
-
-    def test_add_color_palette(self):
-        """Test adding full color palette."""
-        generator = TailwindConfigGenerator()
-        generator.add_color_palette("brand", "#3b82f6")
-
-        brand = generator.config["theme"]["extend"]["colors"]["brand"]
-
-        assert isinstance(brand, dict)
-        assert "50" in brand
-        assert "500" in brand
-        assert "950" in brand
-        assert "var(--color-brand" in brand["500"]
-
-    def test_add_fonts(self):
-        """Test adding custom fonts."""
-        generator = TailwindConfigGenerator()
-        fonts = {
-            "sans": ["Inter", "system-ui", "sans-serif"],
-            "display": ["Playfair Display", "serif"]
-        }
-        generator.add_fonts(fonts)
-
-        font_family = generator.config["theme"]["extend"]["fontFamily"]
-        assert font_family["sans"] == ["Inter", "system-ui", "sans-serif"]
-        assert font_family["display"] == ["Playfair Display", "serif"]
-
-    def test_add_spacing(self):
-        """Test adding custom spacing."""
-        generator = TailwindConfigGenerator()
-        spacing = {
-            "18": "4.5rem",
-            "navbar": "4rem"
-        }
-        generator.add_spacing(spacing)
-
-        spacing_config = generator.config["theme"]["extend"]["spacing"]
-        assert spacing_config["18"] == "4.5rem"
-        assert spacing_config["navbar"] == "4rem"
-
-    def test_add_breakpoints(self):
-        """Test adding custom breakpoints."""
-        generator = TailwindConfigGenerator()
-        breakpoints = {
-            "3xl": "1920px",
-            "tablet": "768px"
-        }
-        generator.add_breakpoints(breakpoints)
-
-        screens = generator.config["theme"]["extend"]["screens"]
-        assert screens["3xl"] == "1920px"
-        assert screens["tablet"] == "768px"
-
-    def test_add_plugins(self):
-        """Test adding plugins."""
-        generator = TailwindConfigGenerator()
-        plugins = ["@tailwindcss/typography", "@tailwindcss/forms"]
-        generator.add_plugins(plugins)
-
-        assert "@tailwindcss/typography" in generator.config["plugins"]
-        assert "@tailwindcss/forms" in generator.config["plugins"]
-
-    def test_add_plugins_no_duplicates(self):
-        """Test that adding same plugin twice doesn't duplicate."""
-        generator = TailwindConfigGenerator()
-        generator.add_plugins(["@tailwindcss/typography"])
-        generator.add_plugins(["@tailwindcss/typography"])
-
-        count = generator.config["plugins"].count("@tailwindcss/typography")
-        assert count == 1
-
-    def test_recommend_plugins(self):
-        """Test plugin recommendations."""
-        generator = TailwindConfigGenerator()
-        recommendations = generator.recommend_plugins()
-
-        assert isinstance(recommendations, list)
-        assert "tailwindcss-animate" in recommendations
-
-    def test_recommend_plugins_nextjs(self):
-        """Test plugin recommendations for Next.js."""
-        generator = TailwindConfigGenerator(framework="nextjs")
-        recommendations = generator.recommend_plugins()
-
-        assert "@tailwindcss/typography" in recommendations
-
-    def test_generate_typescript_config(self):
-        """Test generating TypeScript configuration."""
-        generator = TailwindConfigGenerator(typescript=True)
-        config = generator.generate_config_string()
-
-        assert "import type { Config } from 'tailwindcss'" in config
-        assert "const config: Config" in config
-        assert "export default config" in config
-
-    def test_generate_javascript_config(self):
-        """Test generating JavaScript configuration."""
-        generator = TailwindConfigGenerator(typescript=False)
-        config = generator.generate_config_string()
-
-        assert "module.exports" in config
-        assert "@type" in config
-
-    def test_generate_config_with_colors(self):
-        """Test generating config with custom colors."""
-        generator = TailwindConfigGenerator()
-        generator.add_colors({"brand": "#3b82f6"})
-        config = generator.generate_config_string()
-
-        assert "colors" in config
-        assert "brand" in config
-
-    def test_generate_config_with_plugins(self):
-        """Test generating config with plugins."""
-        generator = TailwindConfigGenerator()
-        generator.add_plugins(["tailwindcss-animate"])
-        config = generator.generate_config_string()
-
-        assert "plugins:" in config
-        assert "require('tailwindcss-animate')" in config
-
-    def test_validate_config_valid(self):
-        """Test validating valid configuration."""
-        generator = TailwindConfigGenerator()
-        valid, message = generator.validate_config()
-
-        assert valid is True
-
-    def test_validate_config_no_content(self):
-        """Test validating config with no content paths."""
-        generator = TailwindConfigGenerator()
-        generator.config["content"] = []
-
-        valid, message = generator.validate_config()
-
-        assert valid is False
-        assert "No content paths" in message
-
-    def test_validate_config_empty_theme(self):
-        """Test validating config with empty theme extensions."""
-        generator = TailwindConfigGenerator()
-        # Default has empty theme.extend
-
-        valid, message = generator.validate_config()
-
-        assert valid is True
-        assert "Warning" in message
-
-    def test_write_config(self, tmp_path):
-        """Test writing configuration to file."""
-        output_path = tmp_path / "tailwind.config.ts"
-        generator = TailwindConfigGenerator(output_path=output_path)
-
-        success, message = generator.write_config()
-
-        assert success is True
-        assert output_path.exists()
-        assert "written to" in message
-
-    def test_write_config_creates_content(self, tmp_path):
-        """Test that written config contains expected content."""
-        output_path = tmp_path / "tailwind.config.ts"
-        generator = TailwindConfigGenerator(output_path=output_path)
-        generator.add_colors({"brand": "#3b82f6"})
-
-        generator.write_config()
-
-        content = output_path.read_text()
-        assert "import type { Config }" in content
-        assert "brand" in content
-
-    def test_write_config_invalid_path(self):
-        """Test writing config to invalid path."""
-        generator = TailwindConfigGenerator(output_path=Path("/invalid/path/config.ts"))
-
-        success, message = generator.write_config()
-
-        assert success is False
-        assert "Failed to write" in message
-
-    def test_full_configuration_typescript(self, tmp_path):
-        """Test generating complete TypeScript configuration."""
-        output_path = tmp_path / "tailwind.config.ts"
-        generator = TailwindConfigGenerator(
-            typescript=True,
-            framework="nextjs",
-            output_path=output_path
-        )
-
-        # Add various customizations
-        generator.add_colors({"brand": "#3b82f6", "accent": "#8b5cf6"})
-        generator.add_fonts({"sans": ["Inter", "sans-serif"]})
-        generator.add_spacing({"navbar": "4rem"})
-        generator.add_breakpoints({"3xl": "1920px"})
-        generator.add_plugins(["tailwindcss-animate"])
-
-        success, _ = generator.write_config()
-        assert success is True
-
-        content = output_path.read_text()
-
-        # Verify all customizations are present
-        assert "brand" in content
-        assert "accent" in content
-        assert "Inter" in content
-        assert "navbar" in content
-        assert "3xl" in content
-        assert "tailwindcss-animate" in content
-
-    def test_full_configuration_javascript(self, tmp_path):
-        """Test generating complete JavaScript configuration."""
-        output_path = tmp_path / "tailwind.config.js"
-        generator = TailwindConfigGenerator(
-            typescript=False,
-            framework="react",
-            output_path=output_path
-        )
-
-        generator.add_colors({"primary": "#3b82f6"})
-        generator.add_plugins(["@tailwindcss/forms"])
-
-        success, _ = generator.write_config()
-        assert success is True
-
-        content = output_path.read_text()
-
-        assert "module.exports" in content
-        assert "primary" in content
-        assert "@tailwindcss/forms" in content

package/.cursor/skills/ui-ux-pro-max/data/charts.csv

@@ -1,26 +0,0 @@
-No,Data Type,Keywords,Best Chart Type,Secondary Options,Color Guidance,Performance Impact,Accessibility Notes,Library Recommendation,Interactive Level
-1,Trend Over Time,"trend, time-series, line, growth, timeline, progress",Line Chart,"Area Chart, Smooth Area",Primary: #0080FF. Multiple series: use distinct colors. Fill: 20% opacity,⚡ Excellent (optimized),✓ Clear line patterns for colorblind users. Add pattern overlays.,"Chart.js, Recharts, ApexCharts",Hover + Zoom
-2,Compare Categories,"compare, categories, bar, comparison, ranking",Bar Chart (Horizontal or Vertical),"Column Chart, Grouped Bar",Each bar: distinct color. Category: grouped same color. Sorted: descending order,⚡ Excellent,✓ Easy to compare. Add value labels on bars for clarity.,"Chart.js, Recharts, D3.js",Hover + Sort
-3,Part-to-Whole,"part-to-whole, pie, donut, percentage, proportion, share",Pie Chart or Donut,"Stacked Bar, Treemap",Colors: 5-6 max. Contrasting palette. Large slices first. Use labels.,⚡ Good (limit 6 slices),⚠ Hard for accessibility. Better: Stacked bar with legend. Avoid pie if >5 items.,"Chart.js, Recharts, D3.js",Hover + Drill
-4,Correlation/Distribution,"correlation, distribution, scatter, relationship, pattern",Scatter Plot or Bubble Chart,"Heat Map, Matrix",Color axis: gradient (blue-red). Size: relative. Opacity: 0.6-0.8 to show density,⚠ Moderate (many points),⚠ Provide data table alternative. Use pattern + color distinction.,"D3.js, Plotly, Recharts",Hover + Brush
-5,Heatmap/Intensity,"heatmap, heat-map, intensity, density, matrix",Heat Map or Choropleth,"Grid Heat Map, Bubble Heat",Gradient: Cool (blue) to Hot (red). Scale: clear legend. Divergent for ±data,⚡ Excellent (color CSS),⚠ Colorblind: Use pattern overlay. Provide numerical legend.,"D3.js, Plotly, ApexCharts",Hover + Zoom
-6,Geographic Data,"geographic, map, location, region, geo, spatial","Choropleth Map, Bubble Map",Geographic Heat Map,Regional: single color gradient or categorized colors. Legend: clear scale,⚠ Moderate (rendering),⚠ Include text labels for regions. Provide data table alternative.,"D3.js, Mapbox, Leaflet",Pan + Zoom + Drill
-7,Funnel/Flow,funnel/flow,"Funnel Chart, Sankey",Waterfall (for flows),Stages: gradient (starting color → ending color). Show conversion %,⚡ Good,✓ Clear stage labels + percentages. Good for accessibility if labeled.,"D3.js, Recharts, Custom SVG",Hover + Drill
-8,Performance vs Target,performance-vs-target,Gauge Chart or Bullet Chart,"Dial, Thermometer",Performance: Red→Yellow→Green gradient. Target: marker line. Threshold colors,⚡ Good,✓ Add numerical value + percentage label beside gauge.,"D3.js, ApexCharts, Custom SVG",Hover
-9,Time-Series Forecast,time-series-forecast,Line with Confidence Band,Ribbon Chart,Actual: solid line #0080FF. Forecast: dashed #FF9500. Band: light shading,⚡ Good,✓ Clearly distinguish actual vs forecast. Add legend.,"Chart.js, ApexCharts, Plotly",Hover + Toggle
-10,Anomaly Detection,anomaly-detection,Line Chart with Highlights,Scatter with Alert,Normal: blue #0080FF. Anomaly: red #FF0000 circle/square marker + alert,⚡ Good,✓ Circle/marker for anomalies. Add text alert annotation.,"D3.js, Plotly, ApexCharts",Hover + Alert
-11,Hierarchical/Nested Data,hierarchical/nested-data,Treemap,"Sunburst, Nested Donut, Icicle",Parent: distinct hues. Children: lighter shades. White borders 2-3px.,⚠ Moderate,⚠ Poor - provide table alternative. Label large areas.,"D3.js, Recharts, ApexCharts",Hover + Drilldown
-12,Flow/Process Data,flow/process-data,Sankey Diagram,"Alluvial, Chord Diagram",Gradient from source to target. Opacity 0.4-0.6 for flows.,⚠ Moderate,⚠ Poor - provide flow table alternative.,"D3.js (d3-sankey), Plotly",Hover + Drilldown
-13,Cumulative Changes,cumulative-changes,Waterfall Chart,"Stacked Bar, Cascade",Increases: #4CAF50. Decreases: #F44336. Start: #2196F3. End: #0D47A1.,⚡ Good,✓ Good - clear directional colors with labels.,"ApexCharts, Highcharts, Plotly",Hover
-14,Multi-Variable Comparison,multi-variable-comparison,Radar/Spider Chart,"Parallel Coordinates, Grouped Bar",Single: #0080FF 20% fill. Multiple: distinct colors per dataset.,⚡ Good,⚠ Moderate - limit 5-8 axes. Add data table.,"Chart.js, Recharts, ApexCharts",Hover + Toggle
-15,Stock/Trading OHLC,stock/trading-ohlc,Candlestick Chart,"OHLC Bar, Heikin-Ashi",Bullish: #26A69A. Bearish: #EF5350. Volume: 40% opacity below.,⚡ Good,⚠ Moderate - provide OHLC data table.,"Lightweight Charts (TradingView), ApexCharts",Real-time + Hover + Zoom
-16,Relationship/Connection Data,relationship/connection-data,Network Graph,"Hierarchical Tree, Adjacency Matrix",Node types: categorical colors. Edges: #90A4AE 60% opacity.,❌ Poor (500+ nodes struggles),❌ Very Poor - provide adjacency list alternative.,"D3.js (d3-force), Vis.js, Cytoscape.js",Drilldown + Hover + Drag
-17,Distribution/Statistical,distribution/statistical,Box Plot,"Violin Plot, Beeswarm",Box: #BBDEFB. Border: #1976D2. Median: #D32F2F. Outliers: #F44336.,⚡ Excellent,"✓ Good - include stats table (min, Q1, median, Q3, max).","Plotly, D3.js, Chart.js (plugin)",Hover
-18,Performance vs Target (Compact),performance-vs-target-(compact),Bullet Chart,"Gauge, Progress Bar","Ranges: #FFCDD2, #FFF9C4, #C8E6C9. Performance: #1976D2. Target: black 3px.",⚡ Excellent,✓ Excellent - compact with clear values.,"D3.js, Plotly, Custom SVG",Hover
-19,Proportional/Percentage,proportional/percentage,Waffle Chart,"Pictogram, Stacked Bar 100%",10x10 grid. 3-5 categories max. 2-3px spacing between squares.,⚡ Good,✓ Good - better than pie for accessibility.,"D3.js, React-Waffle, Custom CSS Grid",Hover
-20,Hierarchical Proportional,hierarchical-proportional,Sunburst Chart,"Treemap, Icicle, Circle Packing",Center to outer: darker to lighter. 15-20% lighter per level.,⚠ Moderate,⚠ Poor - provide hierarchy table alternative.,"D3.js (d3-hierarchy), Recharts, ApexCharts",Drilldown + Hover
-21,Root Cause Analysis,"root cause, decomposition, tree, hierarchy, drill-down, ai-split",Decomposition Tree,"Decision Tree, Flow Chart",Nodes: #2563EB (Primary) vs #EF4444 (Negative impact). Connectors: Neutral grey.,⚠ Moderate (calculation heavy),✓ clear hierarchy. Allow keyboard navigation for nodes.,"Power BI (native), React-Flow, Custom D3.js",Drill + Expand
-22,3D Spatial Data,"3d, spatial, immersive, terrain, molecular, volumetric",3D Scatter/Surface Plot,"Volumetric Rendering, Point Cloud",Depth cues: lighting/shading. Z-axis: color gradient (cool to warm).,❌ Heavy (WebGL required),❌ Poor - requires alternative 2D view or data table.,"Three.js, Deck.gl, Plotly 3D",Rotate + Zoom + VR
-23,Real-Time Streaming,"streaming, real-time, ticker, live, velocity, pulse",Streaming Area Chart,"Ticker Tape, Moving Gauge",Current: Bright Pulse (#00FF00). History: Fading opacity. Grid: Dark.,⚡ Optimized (canvas/webgl),⚠ Flashing elements - provide pause button. High contrast.,Smoothed D3.js, CanvasJS, SciChart,Real-time + Pause
-24,Sentiment/Emotion,"sentiment, emotion, nlp, opinion, feeling",Word Cloud with Sentiment,"Sentiment Arc, Radar Chart",Positive: #22C55E. Negative: #EF4444. Neutral: #94A3B8. Size = Frequency.,⚡ Good,⚠ Word clouds poor for screen readers. Use list view.,"D3-cloud, Highcharts, Nivo",Hover + Filter
-25,Process Mining,"process, mining, variants, path, bottleneck, log",Process Map / Graph,"Directed Acyclic Graph (DAG), Petri Net",Happy path: #10B981 (Thick). Deviations: #F59E0B (Thin). Bottlenecks: #EF4444.,⚠ Moderate to Heavy,⚠ Complex graphs hard to navigate. Provide path summary.,"React-Flow, Cytoscape.js, Recharts",Drag + Node-Click