{"_id":"@birhaus/charts","_rev":"5-cee0325df51d7ff0ace90ec0088d9498","name":"@birhaus/charts","dist-tags":{"latest":"3.0.1"},"versions":{"1.0.1":{"name":"@birhaus/charts","version":"1.0.1","keywords":["birhaus","charts","visualization","d3","recharts","react","typescript","spanish-first"],"author":{"name":"BIRHAUS Team"},"license":"MIT","_id":"@birhaus/charts@1.0.1","maintainers":[{"name":"anthonybir","email":"anthony@bir.com.py"}],"homepage":"https://github.com/birhaus/birhaus-components#readme","bugs":{"url":"https://github.com/birhaus/birhaus-components/issues"},"dist":{"shasum":"9299e6dcd41e0889c22f28b79d295830f2c9d01a","tarball":"https://registry.npmjs.org/@birhaus/charts/-/charts-1.0.1.tgz","fileCount":7,"integrity":"sha512-1GTnHlxRRQKOyd7v0gia7jgLpQ8jH7E2BFdh1EuGvrG5KMQyb4/46Zs5NbqL+7sqrCPbOotvUT2tughRyljZcg==","signatures":[{"sig":"MEUCIQDTYC9N/5GCj3JlZ9WpMK1SEQChuGGgWT6gAkHdJLM95wIgCHfKHOsHfVESk+BMWXjQIZB78Nwx03F3RXOTJH3AQ40=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":902880},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","gitHead":"2cf8b17b4be0872f6bda181ff48925b03f020bf2","scripts":{"dev":"tsup --watch","lint":"eslint src --ext .ts,.tsx --report-unused-disable-directives --max-warnings 0","build":"tsup","type-check":"tsc --noEmit"},"_npmUser":{"name":"anthonybir","email":"anthony@bir.com.py"},"repository":{"url":"git+https://github.com/birhaus/birhaus-components.git","type":"git"},"_npmVersion":"10.9.3","description":"BIRHAUS chart and data visualization components with Spanish-first support","directories":{},"_nodeVersion":"22.18.0","dependencies":{"clsx":"^2.1.0","lucide-react":"^0.363.0","tailwind-merge":"^2.2.1"},"_hasShrinkwrap":false,"devDependencies":{"d3":"^7.8.5","tsup":"^8.0.2","date-fns":"^3.3.1","recharts":"^2.12.2","@types/d3":"^7.4.3","typescript":"^5.2.2","@types/react":"^18.2.66","@types/d3-time":"^3.0.3","@types/d3-array":"^3.2.1","@types/d3-scale":"^4.0.8","@types/d3-shape":"^3.1.6","@types/recharts":"^1.8.29","@types/react-dom":"^18.2.22","@types/d3-time-format":"^4.0.3"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0","@birhaus/tokens":">=2.0.0","@birhaus/provider":">=2.0.1","@birhaus/primitives":">=2.1.0"},"_npmOperationalInternal":{"tmp":"tmp/charts_1.0.1_1755795861529_0.22242887342075535","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@birhaus/charts","version":"1.0.2","keywords":["birhaus","charts","visualization","d3","recharts","react","typescript","spanish-first"],"author":{"name":"BIRHAUS Team"},"license":"MIT","_id":"@birhaus/charts@1.0.2","maintainers":[{"name":"anthonybir","email":"anthony@bir.com.py"}],"homepage":"https://github.com/birhaus/birhaus-components#readme","bugs":{"url":"https://github.com/birhaus/birhaus-components/issues"},"dist":{"shasum":"592e1f9b4748e75cb6ae5548ff180a4e2842ab07","tarball":"https://registry.npmjs.org/@birhaus/charts/-/charts-1.0.2.tgz","fileCount":8,"integrity":"sha512-ulzMZOtuI+oW2FKWlRYlHAc9mGIvco9zTGg8uZsMcGepmXlVt4j93U3KJbS9uPizSCdCKMUVKErrWV7JGC16Ug==","signatures":[{"sig":"MEUCIQCzJEfImQoHIAK0h6lV6udDeFS6N4cG3Mi/FwHo1gW/1gIgK1OFLsdIeb3tKqPapWb32GKG7CuZapZD5IovoWtM1pc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":422694},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","gitHead":"14da87a6d3b1157ffac67880217a01bd0edf01d3","scripts":{"dev":"tsup --watch","lint":"eslint src --ext .ts,.tsx --report-unused-disable-directives --max-warnings 0","build":"tsup","type-check":"tsc --noEmit"},"_npmUser":{"name":"anthonybir","email":"anthony@bir.com.py"},"repository":{"url":"git+https://github.com/birhaus/birhaus-components.git","type":"git"},"_npmVersion":"10.9.3","description":"BIRHAUS chart and data visualization components with Spanish-first support","directories":{},"sideEffects":false,"_nodeVersion":"22.18.0","dependencies":{"d3":"^7.8.5","clsx":"^2.1.0","date-fns":"^3.3.1","recharts":"^2.12.2","lucide-react":"^0.363.0","tailwind-merge":"^2.2.1"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.2","@types/d3":"^7.4.3","typescript":"^5.2.2","@types/react":"^18.2.66","@types/d3-time":"^3.0.3","@types/d3-array":"^3.2.1","@types/d3-scale":"^4.0.8","@types/d3-shape":"^3.1.6","@types/recharts":"^1.8.29","@types/react-dom":"^18.2.22","@types/d3-time-format":"^4.0.3"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0","@birhaus/tokens":">=2.0.0","@birhaus/provider":">=2.0.1","@birhaus/primitives":">=2.1.0"},"_npmOperationalInternal":{"tmp":"tmp/charts_1.0.2_1755907571902_0.8229902473353576","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@birhaus/charts","version":"1.0.3","keywords":["birhaus","charts","visualization","d3","recharts","react","typescript","spanish-first"],"author":{"name":"BIRHAUS Team"},"license":"MIT","_id":"@birhaus/charts@1.0.3","maintainers":[{"name":"anthonybir","email":"anthony@bir.com.py"}],"homepage":"https://github.com/birhaus/birhaus-components#readme","bugs":{"url":"https://github.com/birhaus/birhaus-components/issues"},"dist":{"shasum":"6e686cd6d2acca7f51db7e6898a04eb0ae15c705","tarball":"https://registry.npmjs.org/@birhaus/charts/-/charts-1.0.3.tgz","fileCount":8,"integrity":"sha512-h2VSYM4uepJ1gUm5LpR/1oYGBgPbj3XJAQ7aQs5I1oqeDkF3KBr5nS9VkpWFqUOz2kZ+6jTUlc0qLFTeC7rVwA==","signatures":[{"sig":"MEQCIBBmlmlhWfc8tSunFSOKe2gI9R3xmvnaZFAQWJKG9f3xAiBr84j0MMv+wdclJ8I4ZbXXnPqEhWiq63Zis57Rwdpq8Q==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":422694},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","gitHead":"db9fc33adb3fa8c5ab3e5cc1f6ded61782907608","scripts":{"dev":"tsup --watch","lint":"eslint src --ext .ts,.tsx --report-unused-disable-directives --max-warnings 0","build":"tsup","type-check":"tsc --noEmit"},"_npmUser":{"name":"anthonybir","email":"anthony@bir.com.py"},"repository":{"url":"git+https://github.com/birhaus/birhaus-components.git","type":"git"},"_npmVersion":"10.9.3","description":"BIRHAUS chart and data visualization components with Spanish-first support","directories":{},"sideEffects":false,"_nodeVersion":"22.18.0","dependencies":{"d3":"^7.8.5","clsx":"^2.1.0","date-fns":"^3.3.1","recharts":"^2.12.2","lucide-react":"^0.363.0","tailwind-merge":"^2.2.1"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.2","@types/d3":"^7.4.3","typescript":"^5.2.2","@types/react":"^18.2.66","@types/d3-time":"^3.0.3","@types/d3-array":"^3.2.1","@types/d3-scale":"^4.0.8","@types/d3-shape":"^3.1.6","@types/recharts":"^1.8.29","@types/react-dom":"^18.2.22","@types/d3-time-format":"^4.0.3"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0","@birhaus/tokens":">=2.0.0","@birhaus/provider":">=2.0.1","@birhaus/primitives":">=2.1.0"},"_npmOperationalInternal":{"tmp":"tmp/charts_1.0.3_1755911874384_0.5499274491413","host":"s3://npm-registry-packages-npm-production"}},"3.0.0":{"name":"@birhaus/charts","version":"3.0.0","keywords":["birhaus","charts","visualization","d3","recharts","react","typescript","spanish-first"],"author":{"name":"BIRHAUS Team"},"license":"MIT","_id":"@birhaus/charts@3.0.0","maintainers":[{"name":"anthonybir","email":"anthony@bir.com.py"}],"homepage":"https://github.com/birhaus/birhaus-components#readme","bugs":{"url":"https://github.com/birhaus/birhaus-components/issues"},"dist":{"shasum":"14a5e2a5fa63d8e1ed59fcb3d966d4bf9b1a6f24","tarball":"https://registry.npmjs.org/@birhaus/charts/-/charts-3.0.0.tgz","fileCount":10,"integrity":"sha512-s2oigN+u1Oif9w7sz1PlY9PXkNKgiYmTNrf+E6KRxplWXJdCZCGIN6YMbiyr5NC06DNfIhKuvsNU957OklYAJg==","signatures":[{"sig":"MEQCIAvtuoqdAciNJdMiYiybBIQLBFq8VanElT+RKnYEf/FOAiAjiN2HCjTke/nbJ+A6EZRaDV0HMYGZANcgrryZ+Wz/gw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":718084},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","gitHead":"a808af389a3363802ff4fd234cd6e906b9066a52","scripts":{"dev":"tsup --watch","lint":"eslint src --ext .ts,.tsx --report-unused-disable-directives --max-warnings 0","build":"tsup","type-check":"tsc --noEmit"},"_npmUser":{"name":"anthonybir","email":"anthony@bir.com.py"},"repository":{"url":"git+https://github.com/birhaus/birhaus-components.git","type":"git"},"_npmVersion":"10.9.3","description":"BIRHAUS v3.0 Radical Minimalist Chart Components - Glass morphism data visualization with Spanish-first support","directories":{},"sideEffects":false,"_nodeVersion":"22.18.0","dependencies":{"d3":"^7.8.5","clsx":"^2.1.0","date-fns":"^3.3.1","recharts":"^2.12.2","lucide-react":"^0.363.0","@birhaus/types":"^3.0.0","tailwind-merge":"^2.2.1","@birhaus/themes":"^3.0.0"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.2","@types/d3":"^7.4.3","typescript":"^5.2.2","@types/react":"^18.2.66","@types/d3-time":"^3.0.3","@types/d3-array":"^3.2.1","@types/d3-scale":"^4.0.8","@types/d3-shape":"^3.1.6","@types/recharts":"^1.8.29","@types/react-dom":"^18.2.22","@types/d3-time-format":"^4.0.3"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0","@birhaus/tokens":">=2.0.0","@birhaus/provider":">=2.0.1","@birhaus/primitives":">=2.1.0"},"_npmOperationalInternal":{"tmp":"tmp/charts_3.0.0_1755992437996_0.8157357077010321","host":"s3://npm-registry-packages-npm-production"}},"3.0.1":{"name":"@birhaus/charts","version":"3.0.1","description":"BIRHAUS v3.0 Radical Minimalist Chart Components - Glass morphism data visualization with Spanish-first support","sideEffects":false,"main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","scripts":{"build":"tsup","dev":"tsup --watch","lint":"eslint src --ext .ts,.tsx --report-unused-disable-directives --max-warnings 0","type-check":"tsc --noEmit"},"dependencies":{"clsx":"^2.1.0","d3":"^7.8.5","date-fns":"^3.3.1","lucide-react":"^0.363.0","recharts":"^2.12.2","tailwind-merge":"^2.2.1","@birhaus/types":"^3.0.0","@birhaus/themes":"^3.0.1"},"devDependencies":{"@types/react":"^18.2.66","@types/react-dom":"^18.2.22","@types/d3":"^7.4.3","@types/d3-scale":"^4.0.8","@types/d3-shape":"^3.1.6","@types/d3-array":"^3.2.1","@types/d3-time":"^3.0.3","@types/d3-time-format":"^4.0.3","@types/recharts":"^1.8.29","typescript":"^5.2.2","tsup":"^8.0.2"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0","@birhaus/primitives":">=2.1.0","@birhaus/tokens":">=2.0.0","@birhaus/provider":">=2.0.1"},"keywords":["birhaus","charts","visualization","d3","recharts","react","typescript","spanish-first"],"author":{"name":"BIRHAUS Team"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/birhaus/birhaus-components.git"},"_id":"@birhaus/charts@3.0.1","gitHead":"a808af389a3363802ff4fd234cd6e906b9066a52","bugs":{"url":"https://github.com/birhaus/birhaus-components/issues"},"homepage":"https://github.com/birhaus/birhaus-components#readme","_nodeVersion":"22.18.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-YVNXHEN9IrfarV2abl4Jv1HsGzMlxhu6j4O4PZGHjay/qUWsyUF9w86YL6hy3LafuvJ4u+ZdA4bcAzovv735NQ==","shasum":"b1d60d96d9454375ef1b721b4ae551c928a06e58","tarball":"https://registry.npmjs.org/@birhaus/charts/-/charts-3.0.1.tgz","fileCount":8,"unpackedSize":753310,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCYYuFYV5hEsJ04/fTD0LMTLSXjvheCbh7y2ls7THadXQIgBroG/0CMYa5BC9o6/OqKgJUuU5DhBPTgMCRq9Rj2Gac="}]},"_npmUser":{"name":"anthonybir","email":"anthony@bir.com.py"},"directories":{},"maintainers":[{"name":"anthonybir","email":"anthony@bir.com.py"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/charts_3.0.1_1755997678700_0.20053022729923575"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-21T17:04:21.440Z","modified":"2025-08-24T01:07:59.133Z","1.0.1":"2025-08-21T17:04:21.765Z","1.0.2":"2025-08-23T00:06:12.110Z","1.0.3":"2025-08-23T01:17:54.583Z","3.0.0":"2025-08-23T23:40:38.230Z","3.0.1":"2025-08-24T01:07:58.915Z"},"bugs":{"url":"https://github.com/birhaus/birhaus-components/issues"},"author":{"name":"BIRHAUS Team"},"license":"MIT","homepage":"https://github.com/birhaus/birhaus-components#readme","keywords":["birhaus","charts","visualization","d3","recharts","react","typescript","spanish-first"],"repository":{"type":"git","url":"git+https://github.com/birhaus/birhaus-components.git"},"description":"BIRHAUS v3.0 Radical Minimalist Chart Components - Glass morphism data visualization with Spanish-first support","maintainers":[{"name":"anthonybir","email":"anthony@bir.com.py"}],"readme":"# @birhaus/charts\n\n**Data visualization components with Spanish-first support for BIRHAUS design system**\n\n[![npm version](https://badge.fury.io/js/@birhaus%2Fcharts.svg)](https://badge.fury.io/js/@birhaus%2Fcharts)\n[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)\n[![Spanish-First](https://img.shields.io/badge/Spanish--First-✓-green.svg)](#spanish-first-design)\n[![D3](https://img.shields.io/badge/D3-Powered-orange.svg)](https://d3js.org/)\n\nProfessional chart and data visualization components built for Spanish-first applications, following BIRHAUS UX principles for cognitive load reduction.\n\n## 🚀 Features\n\n- **📊 Professional Charts** - Built with D3.js and Recharts for production quality\n- **🇪🇸 Spanish-First** - All labels, tooltips, and legends in Spanish by default\n- **♿ Accessibility** - WCAG AA+ compliant with screen reader support\n- **📱 Responsive** - Mobile-optimized chart layouts\n- **🎨 BIRHAUS UX** - Cognitive load reduction and progressive disclosure\n- **🌙 Dark Mode** - Automatic theme adaptation\n- **💾 Export Ready** - Built-in SVG/PNG export functionality\n- **🔢 Data Smart** - Automatic number formatting for Spanish locales\n\n## 📦 Installation\n\n```bash\nnpm install @birhaus/charts\n\n# Peer dependencies\nnpm install react react-dom @birhaus/tokens @birhaus/primitives\n```\n\n## 🎯 Quick Start\n\n```tsx\nimport { BirhausLineChart, BirhausSparkline, BirhausGradeDistribution } from '@birhaus/charts'\n\nfunction DashboardCharts() {\n  const salesData = [\n    { fecha: '2024-01', ventas: 150000, meta: 120000 },\n    { fecha: '2024-02', ventas: 180000, meta: 140000 },\n    { fecha: '2024-03', ventas: 165000, meta: 160000 },\n  ]\n\n  return (\n    <div>\n      {/* Professional Line Chart */}\n      <BirhausLineChart\n        data={salesData}\n        titleEs=\"Ventas Mensuales\"\n        titleEn=\"Monthly Sales\"\n        xAxisKey=\"fecha\"\n        lines={[\n          { key: 'ventas', color: '#3B82F6', name: 'Ventas Reales' },\n          { key: 'meta', color: '#10B981', name: 'Meta' }\n        ]}\n        showTrend={true}\n        showExport={true}\n      />\n\n      {/* Minimal Trend Indicator */}\n      <BirhausSparkline\n        data={[120, 135, 148, 162, 158, 171, 180]}\n        color=\"#EF4444\"\n        showLastValue={true}\n        formatValue={(value) => `₲ ${value.toLocaleString()}`}\n      />\n\n      {/* Educational Grade Distribution */}\n      <BirhausGradeDistribution\n        data={gradeData}\n        titleEs=\"Distribución de Notas\"\n        showPercentages={true}\n        colorScheme=\"academic\"\n      />\n    </div>\n  )\n}\n```\n\n## 📋 Components\n\n| Component | Description | Best Used For |\n|-----------|-------------|---------------|\n| **BirhausLineChart** | Multi-line time series charts | Sales trends, financial performance, growth metrics |\n| **BirhausSparkline** | Minimal inline trend indicators | KPI cards, dashboard summaries, quick trends |\n| **BirhausGradeDistribution** | Educational grade distribution | Academic performance, student analytics |\n| **BirhausKPIDashboard** | KPI metric collections | Executive dashboards, performance monitoring |\n\n## 📊 Line Chart\n\n### Basic Usage\n\n```tsx\nimport { BirhausLineChart } from '@birhaus/charts'\n\nconst data = [\n  { mes: 'Enero', ingresos: 500000, gastos: 350000 },\n  { mes: 'Febrero', ingresos: 650000, gastos: 400000 },\n  { mes: 'Marzo', ingresos: 750000, gastos: 450000 },\n]\n\n<BirhausLineChart\n  data={data}\n  titleEs=\"Flujo de Caja Mensual\"\n  titleEn=\"Monthly Cash Flow\"\n  xAxisKey=\"mes\"\n  lines={[\n    { \n      key: 'ingresos', \n      color: '#10B981', \n      name: 'Ingresos',\n      strokeWidth: 3\n    },\n    { \n      key: 'gastos', \n      color: '#EF4444', \n      name: 'Gastos',\n      strokeDasharray: '5,5' // Dashed line\n    }\n  ]}\n  height={400}\n  showGrid={true}\n  showLegend={true}\n  showTooltip={true}\n/>\n```\n\n### Advanced Features\n\n```tsx\n<BirhausLineChart\n  data={financialData}\n  titleEs=\"Rendimiento de Inversiones\"\n  subtitle=\"Comparación anual 2023-2024\"\n  xAxisKey=\"fecha\"\n  lines={[\n    { key: 'portfolio', color: '#3B82F6', name: 'Portafolio' },\n    { key: 'benchmark', color: '#8B5CF6', name: 'Índice de Referencia' }\n  ]}\n  \n  // Spanish-first formatting\n  formatXAxis={(value) => new Date(value).toLocaleDateString('es-PY')}\n  formatYAxis={(value) => `₲ ${value.toLocaleString('es-PY')}`}\n  formatTooltip={(value, name) => [`₲ ${value.toLocaleString('es-PY')}`, name]}\n  \n  // Export functionality\n  showExport={true}\n  exportFormats={['png', 'svg', 'csv']}\n  \n  // Trend analysis\n  showTrend={true}\n  trendColor=\"#10B981\"\n  \n  // Cognitive load reduction\n  maxDataPoints={12} // Limit data points for clarity\n  animationDuration={750}\n/>\n```\n\n## ⚡ Sparkline\n\nMinimal trend indicators perfect for KPI cards and dashboard summaries:\n\n```tsx\nimport { BirhausSparkline } from '@birhaus/charts'\n\n// Basic trend\n<BirhausSparkline\n  data={[10, 15, 12, 18, 22, 19, 25]}\n  color=\"#3B82F6\"\n  height={40}\n  showLastValue={true}\n/>\n\n// Financial sparkline\n<BirhausSparkline\n  data={monthlyRevenue}\n  color=\"#10B981\"\n  showLastValue={true}\n  formatValue={(value) => `₲ ${(value / 1000).toFixed(0)}K`}\n  showTrend={true}\n  strokeWidth={2}\n/>\n\n// Comparison sparklines\n<div className=\"grid grid-cols-3 gap-4\">\n  <div>\n    <p>Ventas</p>\n    <BirhausSparkline data={salesData} color=\"#3B82F6\" />\n  </div>\n  <div>\n    <p>Costos</p>\n    <BirhausSparkline data={costData} color=\"#EF4444\" />\n  </div>\n  <div>\n    <p>Ganancia</p>\n    <BirhausSparkline data={profitData} color=\"#10B981\" />\n  </div>\n</div>\n```\n\n## 🎓 Grade Distribution\n\nPerfect for educational institutions and student performance tracking:\n\n```tsx\nimport { BirhausGradeDistribution } from '@birhaus/charts'\n\nconst gradeData = [\n  { grade: 'A', count: 15, label: 'Excelente' },\n  { grade: 'B', count: 25, label: 'Bueno' },\n  { grade: 'C', count: 30, label: 'Regular' },\n  { grade: 'D', count: 12, label: 'Insuficiente' },\n  { grade: 'F', count: 3, label: 'Reprobado' }\n]\n\n<BirhausGradeDistribution\n  data={gradeData}\n  titleEs=\"Distribución de Calificaciones - Matemática I\"\n  titleEn=\"Grade Distribution - Mathematics I\"\n  showPercentages={true}\n  showStudentCount={true}\n  colorScheme=\"academic\" // Green to red gradient\n  height={300}\n  \n  // Spanish-first labels\n  tooltipFormatter={(entry) => [\n    `${entry.count} estudiantes (${entry.percentage}%)`,\n    entry.label\n  ]}\n/>\n```\n\n## 📈 KPI Dashboard\n\nComprehensive KPI visualization with multiple chart types:\n\n```tsx\nimport { BirhausKPIDashboard } from '@birhaus/charts'\n\nconst kpiData = {\n  revenue: {\n    current: 1500000,\n    previous: 1200000,\n    target: 1800000,\n    trend: [100, 120, 135, 140, 150]\n  },\n  students: {\n    current: 450,\n    previous: 425,\n    target: 500,\n    trend: [400, 415, 430, 445, 450]\n  },\n  satisfaction: {\n    current: 4.2,\n    previous: 4.0,\n    target: 4.5,\n    trend: [3.8, 3.9, 4.0, 4.1, 4.2]\n  }\n}\n\n<BirhausKPIDashboard\n  data={kpiData}\n  titleEs=\"Panel de Control Ejecutivo\"\n  layout=\"grid\" // or 'row'\n  showTrends={true}\n  showTargets={true}\n  period=\"monthly\"\n  \n  // Spanish-first KPI labels\n  labels={{\n    revenue: { es: 'Ingresos', en: 'Revenue' },\n    students: { es: 'Estudiantes', en: 'Students' },\n    satisfaction: { es: 'Satisfacción', en: 'Satisfaction' }\n  }}\n  \n  // Custom formatters\n  formatters={{\n    revenue: (value) => `₲ ${(value / 1000).toFixed(0)}K`,\n    students: (value) => `${value} estudiantes`,\n    satisfaction: (value) => `${value}/5 ⭐`\n  }}\n/>\n```\n\n## 🎨 BIRHAUS UX Principles\n\n### Cognitive Load Reduction\n\n```tsx\n// ❌ Cognitive overload - too much information\n<ComplexChart data={data} showAllMetrics={true} />\n\n// ✅ BIRHAUS approach - progressive disclosure\n<BirhausLineChart\n  data={data}\n  maxDataPoints={7} // Miller's Law - 7±2 items\n  progressiveDisclosure={true} // Click to reveal more detail\n  primaryMetric=\"ingresos\" // Focus on one key metric\n  \n  // Secondary metrics revealed on hover/click\n  secondaryMetrics={['gastos', 'ganancia']}\n/>\n```\n\n### Spanish-First Design\n\n```tsx\n// All components default to Spanish\n<BirhausLineChart\n  titleEs=\"Ventas por Trimestre\" // Primary\n  titleEn=\"Quarterly Sales\"      // Fallback\n  data={data}\n  \n  // Spanish number formatting\n  formatYAxis={(value) => `₲ ${value.toLocaleString('es-PY')}`}\n  \n  // Spanish month names\n  formatXAxis={(value) => new Date(value).toLocaleDateString('es-PY', { \n    month: 'long', \n    year: 'numeric' \n  })}\n/>\n```\n\n### Accessibility Features\n\nAll charts include:\n\n- **Screen Reader Support** - Proper ARIA labels and data tables\n- **Keyboard Navigation** - Tab through data points and controls\n- **High Contrast Mode** - Automatic color adjustments\n- **Focus Indicators** - Clear visual focus states\n- **Alternative Text** - Descriptive alt text for exported images\n\n## 🌙 Dark Mode Support\n\nCharts automatically adapt to your theme:\n\n```tsx\nimport { BirhausProvider } from '@birhaus/provider'\n\n<BirhausProvider theme=\"dark\">\n  <BirhausLineChart\n    data={data}\n    // Automatically uses dark theme colors\n    // Text and gridlines adapt\n    // Export maintains theme consistency\n  />\n</BirhausProvider>\n```\n\n## 💾 Export Functionality\n\nBuilt-in export options for all chart types:\n\n```tsx\n<BirhausLineChart\n  data={data}\n  showExport={true}\n  exportFormats={['png', 'svg', 'csv', 'pdf']}\n  exportFilename=\"ventas-mensuales-2024\"\n  \n  // Custom export options\n  exportOptions={{\n    png: { width: 1200, height: 600, scale: 2 },\n    svg: { preserveFonts: true },\n    csv: { includeHeaders: true, delimiter: ';' },\n    pdf: { orientation: 'landscape', title: 'Reporte de Ventas' }\n  }}\n/>\n```\n\n## 📱 Responsive Design\n\nCharts automatically adapt to different screen sizes:\n\n```tsx\n<BirhausLineChart\n  data={data}\n  responsive={true}\n  \n  // Desktop: Full chart with legend\n  // Tablet: Simplified legend\n  // Mobile: Hide legend, show tooltip on tap\n  \n  breakpoints={{\n    mobile: 640,\n    tablet: 1024\n  }}\n  \n  mobileOptimizations={{\n    hideXAxisLabels: true,\n    simplifyTooltip: true,\n    increaseTooltipSize: true\n  }}\n/>\n```\n\n## 🔧 Customization\n\n### Custom Color Schemes\n\n```tsx\nconst customTheme = {\n  primary: '#1F6FEB',\n  secondary: '#10B981',\n  accent: '#F59E0B',\n  danger: '#EF4444',\n  success: '#10B981',\n  warning: '#F59E0B'\n}\n\n<BirhausLineChart\n  data={data}\n  colorScheme={customTheme}\n  // OR use predefined schemes\n  colorScheme=\"financial\" // Blue/green for money\n  colorScheme=\"academic\"  // Green/red for grades\n  colorScheme=\"health\"    // Soft pastels\n/>\n```\n\n### Custom Animations\n\n```tsx\n<BirhausLineChart\n  data={data}\n  animation={{\n    duration: 1000,\n    easing: 'ease-out',\n    delay: 200,\n    stagger: 100 // Stagger line animations\n  }}\n  \n  // Hover animations\n  hoverEffects={{\n    scale: 1.1,\n    shadowBlur: 10,\n    duration: 200\n  }}\n/>\n```\n\n## 🧪 Testing\n\nTesting utilities for chart components:\n\n```tsx\nimport { render, screen } from '@testing-library/react'\nimport { BirhausLineChart } from '@birhaus/charts'\nimport { axe, toHaveNoViolations } from 'jest-axe'\n\nexpect.extend(toHaveNoViolations)\n\ntest('BirhausLineChart accessibility', async () => {\n  const { container } = render(\n    <BirhausLineChart data={mockData} titleEs=\"Test Chart\" />\n  )\n  \n  // Check for accessibility violations\n  const results = await axe(container)\n  expect(results).toHaveNoViolations()\n  \n  // Check ARIA labels\n  expect(screen.getByLabelText('Test Chart')).toBeInTheDocument()\n})\n```\n\n## 🚀 Performance\n\n- **Bundle Size**: ~45KB gzipped (including D3 utilities)\n- **Render Performance**: Optimized for 60fps animations\n- **Memory Usage**: Efficient data structures, automatic cleanup\n- **Large Datasets**: Virtual scrolling for 10,000+ data points\n\n## 📚 Examples\n\n### Financial Dashboard\n\n```tsx\nfunction FinancialDashboard() {\n  return (\n    <div className=\"space-y-6\">\n      {/* Revenue Trend */}\n      <BirhausLineChart\n        data={revenueData}\n        titleEs=\"Ingresos Mensuales\"\n        lines={[{ key: 'ingresos', color: '#10B981', name: 'Ingresos' }]}\n        showTrend={true}\n      />\n      \n      {/* Quick KPIs */}\n      <div className=\"grid grid-cols-4 gap-4\">\n        <div className=\"p-4 bg-white rounded-lg\">\n          <h3>Ventas Hoy</h3>\n          <BirhausSparkline data={todaySales} color=\"#3B82F6\" />\n        </div>\n        {/* More KPI cards... */}\n      </div>\n    </div>\n  )\n}\n```\n\n### Educational Analytics\n\n```tsx\nfunction StudentAnalytics() {\n  return (\n    <div>\n      <BirhausGradeDistribution\n        data={semesterGrades}\n        titleEs=\"Rendimiento Académico - Semestre I\"\n        showPercentages={true}\n        colorScheme=\"academic\"\n      />\n    </div>\n  )\n}\n```\n\n## 🐛 Troubleshooting\n\n### Common Issues\n\n**Charts not rendering**\n```tsx\n// Ensure data is properly formatted\nconst data = [\n  { x: 'Jan', y: 100 }, // ✅ Correct\n  { x: null, y: 200 },  // ❌ Null values cause issues\n]\n\n// Filter out null values\nconst cleanData = data.filter(d => d.x !== null && d.y !== null)\n```\n\n**TypeScript errors**\n```bash\nnpm install @types/d3 --save-dev\n```\n\n**Spanish formatting issues**\n```tsx\n// Ensure locale is set properly\nimport { BirhausProvider } from '@birhaus/provider'\n\n<BirhausProvider locale=\"es-PY\">\n  <YourCharts />\n</BirhausProvider>\n```\n\n## 🤝 Contributing\n\nWe welcome contributions! Please see our [Contributing Guide](../../CONTRIBUTING.md).\n\n## 📄 License\n\nMIT © BIRHAUS Team\n\n---\n\n**Visualiza datos con estilo español y simplicidad BIRHAUS 📊🇪🇸**","readmeFilename":"README.md"}