فارسی

نقشهٔ ایران

نقشهٔ ۳۱ استان ایران برای نمایش داده به تفکیک استان یا انتخاب یک یا چند استان؛ با صفحه‌کلید و جدول هم‌ارز برای صفحه‌خوان.

npmpnpmyarnbun

npm i @kashi-ui/react @kashi-ui/css

import { IranMap } from "@kashi-ui/react";

CSS را یک بار در ریشهٔ برنامه وارد کنید: import "@kashi-ui/css"راهنمای نصب

npx shadcn@latest add @kashi/iran-map

کد خودِ کامپوننت در پوشهٔ components/kashi پروژهٔ شما کپی می‌شود. برای نسخه‌های قدیمی shadcn، راهنمای «دربارهٔ shadcn» را ببینید.دربارهٔ shadcn

npm i @kashi-ui/elements @kashi-ui/css

import "@kashi-ui/elements/map.js";

<kashi-iran-map></kashi-iran-map>

بدون React، برای HTML، وردپرس، Vue و Angular.CDN، نمونه و ویژگی‌ها

import { IranMap } from "@kashi-ui/react";

نقشهٔ رنگی

به هر استان یک عدد بدهید؛ استان‌ها بر اساس مقدار در طیف رنگ برند رنگ می‌گیرند و استان‌های بدون داده خاکستری می‌مانند. با رفتن روی هر استان نام و مقدارش نمایش داده می‌شود. داده‌های این نمونه ساختگی‌اند.

۴۱۰۱۸٬۴۲۰ سفارش

سفارش‌های ماه گذشته به تفکیک استان
تهران	۱۸٬۴۲۰ سفارش
خراسان رضوی	۷٬۳۱۰ سفارش
اصفهان	۶٬۹۸۰ سفارش
فارس	۵٬۸۷۰ سفارش
آذربایجان شرقی	۴٬۶۲۰ سفارش
البرز	۴٬۴۱۰ سفارش
خوزستان	۳٬۹۵۰ سفارش
مازندران	۳٬۷۲۰ سفارش
گیلان	۳٬۱۸۰ سفارش
کرمان	۲٬۸۶۰ سفارش
آذربایجان غربی	۲٬۷۴۰ سفارش
قم	۲٬۲۱۰ سفارش
یزد	۱٬۹۸۰ سفارش
هرمزگان	۱٬۷۲۰ سفارش
کرمانشاه	۱٬۶۵۰ سفارش
همدان	۱٬۵۶۰ سفارش
گلستان	۱٬۵۳۰ سفارش
مرکزی	۱٬۴۹۰ سفارش
قزوین	۱٬۳۹۰ سفارش
سیستان و بلوچستان	۱٬۳۴۰ سفارش
لرستان	۱٬۲۴۰ سفارش
کردستان	۱٬۱۲۰ سفارش
اردبیل	۱٬۰۸۰ سفارش
بوشهر	۱٬۰۱۰ سفارش
زنجان	۹۱۰ سفارش
سمنان	۸۲۰ سفارش
چهارمحال و بختیاری	۶۴۰ سفارش
خراسان شمالی	۵۹۰ سفارش
خراسان جنوبی	۵۶۰ سفارش
کهگیلویه و بویراحمد	۵۲۰ سفارش
ایلام	۴۱۰ سفارش

<IranMap
data={{ "تهران": 18420, "خراسان رضوی": 7310, "اصفهان": 6980, /* … */ }}
unit="سفارش"
label="سفارش‌های ماه گذشته به تفکیک استان"
/>

کلیدها همان نام‌های PROVINCES در @kashi-ui/persian هستند، مثل "تهران" یا "سیستان و بلوچستان". تعداد پله‌های رنگ با steps (پیش‌فرض ۵) و قالب عدد با format عوض می‌شود. چون معمولاً یک استان (مثل تهران) خیلی بزرگ‌تر از بقیه است، پله‌ها به‌طور پیش‌فرض بر اساس رتبه پخش می‌شوند (scale="quantile") تا تفاوت بقیهٔ استان‌ها هم دیده شود؛ برای بازه‌های مساوی scale="linear" بدهید.

انتخاب استان

با دادن value یا onChange نقشه قابل انتخاب می‌شود. مقدار همان نام استان است، پس با انتخاب استان هماهنگ کار می‌کند:

استان

<ProvinceSelect value={province} onChange={setProvince} />
<IranMap value={province} onChange={setProvince} label="استان محل سکونت" />

انتخاب چند استان

با multiple مقدار یک آرایه است؛ مثلاً برای مناطق تحت پوشش ارسال یا فیلتر گزارش:

ارسال به ۳ استان: گیلان، مازندران، گلستان

<IranMap multiple value={regions} onChange={setRegions} label="استان‌های تحت پوشش ارسال" />

داده و انتخاب را می‌شود با هم داشت: استان‌ها رنگ داده را نشان می‌دهند و استان انتخاب‌شده با رنگ برند و حاشیه برجسته می‌شود.

ویژگی‌ها (props)
نام	توضیح، نوع و پیش‌فرض
`data`	مقدار هر استان برای نقشهٔ رنگی نوع: `Record<string, number>`
`value / defaultValue`	استان یا استان‌های انتخاب‌شده نوع: `stringstring[]null`
`onChange`	با هر انتخاب؛ نقشه را قابل انتخاب می‌کند نوع: `(value: string \| string[] \| null) => void`
`multiple`	انتخاب چند استان نوع: `boolean`پیش‌فرض `false`
`label`	نام دسترس‌پذیر نوع: `string`پیش‌فرض `«نقشهٔ استان‌های ایران»`
`unit`	واحد در راهنما و جدول، مثل «سفارش» نوع: `string`
`format`	قالب عدد نوع: `(n: number) => string`پیش‌فرض `ارقام فارسی`
`steps`	تعداد پله‌های رنگ نوع: `number`پیش‌فرض `5`
`scale`	quantile: هر پله تعداد تقریباً برابری استان؛ linear: بازهٔ مساوی نوع: `"quantile""linear"`پیش‌فرض `"quantile"`
`legend`	راهنمای رنگ زیر نقشه نوع: `boolean`پیش‌فرض `true با data`
`tooltip`	خط اضافه در راهنمای هر استان نوع: `(province, value) => string`

مرز و نقطهٔ وسط هر استان با IRAN_PROVINCES و IRAN_VIEWBOX هم در دسترس است، برای وقتی که نقشهٔ خودتان را می‌سازید.

متغیرهای CSS

متغیرهای CSS
متغیر	کاربرد و پیش‌فرض
`--k-iran-map-empty`	رنگ استان بدون داده پیش‌فرض `var(--k-bg-tertiary)`
`--k-iran-map-selected`	رنگ استان انتخاب‌شده پیش‌فرض `var(--k-bg-brand)`
`--k-iran-map-border`	رنگ مرز بین استان‌ها پیش‌فرض `var(--k-bg-primary)`

دسترس‌پذیری

نقشهٔ بدون انتخاب یک تصویر با نام است و همهٔ مقدارها در یک جدول پنهان، از بیشترین به کمترین، برای صفحه‌خوان و چاپ آمده‌اند.
در حالت انتخاب، استان‌ها radio (یا checkbox با multiple) هستند و فقط یکی در ترتیب Tab است؛ جهت‌نماها بین استان‌ها جابه‌جا می‌شوند، Home و End اول و آخر، و Enter یا فاصله انتخاب می‌کند. نام هر استان همراه مقدارش خوانده می‌شود.
رنگ تنها نشانهٔ انتخاب نیست؛ استان انتخاب‌شده حاشیهٔ پررنگ هم دارد و در حالت forced-colors با رنگ سیستم برجسته می‌شود.

مرزها از Natural Earth (مالکیت عمومی) گرفته و ساده شده‌اند؛ برای کارهای نقشه‌برداری دقیق یا حقوقی مناسب نیستند.

وب کامپوننت

همین کامپوننت بدون React، برای HTML، وردپرس، Vue، Svelte و Angular: <kashi-iran-map> در @kashi-ui/elements.

نصب

بدون ابزار ساخت، این دو خط را در <head> صفحه بگذارید:

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kashi-ui/css/dist/kashi.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/@kashi-ui/elements/dist/cdn/kashi-elements.js"></script>

یا با npm، و فقط همین بخش را وارد کنید:

npm

npm i @kashi-ui/elements @kashi-ui/css

import "@kashi-ui/css";
import "@kashi-ui/elements/map.js";

نمونه

<kashi-iran-map selectable name="province" unit="سفارش" data='{"تهران": 1200, "اصفهان": 420, "خراسان رضوی": 380, "فارس": 260, "آذربایجان شرقی": 190}'></kashi-iran-map>

ویژگی‌ها

ویژگی‌های وب کامپوننت
نام	توضیح، نوع و پیش‌فرض
`data`	نام استان ← عدد، برای نقشهٔ رنگی نوع: `JSON`
`selectable`	انتخاب یک استان نوع: `بولی`
`multiple`	انتخاب چند استان نوع: `بولی`
`value / name`	استان انتخاب‌شده و نام فیلد فرم نوع: `متن`
`unit`	واحد در راهنما و جدول، مثل «سفارش» نوع: `متن`
`steps / scale`	پله‌های رنگ و نحوهٔ تقسیم داده نوع: `عدد / linear`پیش‌فرض `5 / quantile`
`legend`	بدون راهنمای رنگ نوع: `false`
`label`	نام برای صفحه‌خوان نوع: `متن`پیش‌فرض `نقشهٔ استان‌های ایران`

رویدادها و JavaScript

نام	توضیح
`kashi-change`	detail: { value }؛ در multiple آرایه
`element.data`	داده با JavaScript