kft-chart-visualizer

A powerful and reusable chart visualizer built specifically for Kifiya Financial Technologies. This React-based package enables you to embed a variety of dynamic, data-driven charts (such as pie, bar, and gauge charts) with just a few lines of configuration.

The charts are driven by remote APIs, supporting secure authentication and token refresh logic — making it suitable for dashboards that monitor youth employment metrics, target achievements, and other KPIs.

📦 Installation

npm install kft-chart-visualizer

🚀 Quick Start

import KftVisualizerChart from 'kft-chart-visualizer';

function Dashboard() {
  return (
    <KftVisualizerChart
      apiKey="your-api-key"
      baseUrl="https://your-api-url.com/api/v1/kft-visualizer"
      category="youth-employment"
      refreshAuth={{ username: 'your-username', password: 'your-password' }}
      refreshUrl="https://your-api-url.com/refresh-token"
    />
  );
}

🧩 Props

| Prop | Type | Required | Description | |--------------|----------|----------|-------------| | category | string | ✅ | The data category to visualize (e.g., "youth-employment", "target-progress"). This determines what type of chart will be rendered and which data will be fetched from the API. | | baseUrl | string | ✅ | The base URL of your API. It should point to the endpoint that returns the chart data. + /api/v1/kft-visualizer | | apiKey | string | ✅ | A valid API key used to authenticate the data-fetching requests. | | refreshAuth| object | ✅ | An object containing username and password for authentication purposes. Used when requesting a new token from refreshUrl. | | → username | string | ✅ | The username credential for token refresh. | | → password | string | ✅ | The password credential for token refresh. | | refreshUrl | string | ✅ | API endpoint that issues a new access token when the current one expires. |

📊 Example Use Cases

The component is ideal for:

• Visualizing employment and empowerment KPIs
• Monitoring progress against strategic targets
• Displaying categorized insights (e.g., wage-employed vs. self-employed youth)
• Embedding charts in admin or government portals

🧪 Local Development

Clone the repo and run it locally with:

npm install
npm run dev

To create a production build:

npm run build

🔧 Tech Stack

• React 18
• Redux Toolkit
• Echarts for rendering interactive charts
• Tailwind CSS for styling
• Vite for fast build and dev server

📝 License

MIT License — see the LICENSE file for details.

💬 Contact

Maintained by the team at Kifiya Financial Technologies. For support or feature requests, please contact the development team internally.