Merge branch 'bhakti' of https://git.kska.io/notkshitij/status200 into bhakti
This commit is contained in:
Bhakti
@@ -7,6 +7,7 @@ yarn-error.log*
|
|||||||
pnpm-debug.log*
|
pnpm-debug.log*
|
||||||
lerna-debug.log*
|
lerna-debug.log*
|
||||||
|
|
||||||
|
package-lock.json
|
||||||
node_modules
|
node_modules
|
||||||
dist
|
dist
|
||||||
dist-ssr
|
dist-ssr
|
||||||
|
|||||||
+1
-1
@@ -2,7 +2,7 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image" href="/images/logo.png" />
|
<link rel="icon" type="image/svg+xml" href="/images/logo.png" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Crop Compass</title>
|
<title>Crop Compass</title>
|
||||||
<link
|
<link
|
||||||
|
|||||||
@@ -11,11 +11,15 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@reduxjs/toolkit": "^2.2.7",
|
"@reduxjs/toolkit": "^2.2.7",
|
||||||
|
"apexcharts": "^4.5.0",
|
||||||
|
"chart.js": "^4.4.8",
|
||||||
"flowbite": "^2.5.1",
|
"flowbite": "^2.5.1",
|
||||||
"@splinetool/react-spline": "^4.0.0",
|
"@splinetool/react-spline": "^4.0.0",
|
||||||
"flowbite": "^2.5.1",
|
"flowbite": "^2.5.1",
|
||||||
"framer-motion": "^12.4.7",
|
"framer-motion": "^12.4.7",
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
|
"react-apexcharts": "^1.7.0",
|
||||||
|
"react-chartjs-2": "^5.3.0",
|
||||||
"react-dom": "^18.3.1",
|
"react-dom": "^18.3.1",
|
||||||
"react-icons": "^5.3.0",
|
"react-icons": "^5.3.0",
|
||||||
"react-intersection-observer": "^9.15.1",
|
"react-intersection-observer": "^9.15.1",
|
||||||
|
|||||||
@@ -0,0 +1 @@
|
|||||||
|
<svg viewBox="-2.4 -2.4 28.80 28.80" xmlns="http://www.w3.org/2000/svg" fill="#000000" stroke="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="3.2640000000000002"> <title></title> <g id="Complete"> <g id="add-square"> <g> <rect data-name="--Rectangle" fill="none" height="20" id="_--Rectangle" rx="2" ry="2" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.4" width="20" x="2" y="2"></rect> <line fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.4" x1="15.5" x2="8.5" y1="12" y2="12"></line> <line fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.4" x1="12" x2="12" y1="15.5" y2="8.5"></line> </g> </g> </g> </g><g id="SVGRepo_iconCarrier"> <title></title> <g id="Complete"> <g id="add-square"> <g> <rect data-name="--Rectangle" fill="none" height="20" id="_--Rectangle" rx="2" ry="2" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.4" width="20" x="2" y="2"></rect> <line fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.4" x1="15.5" x2="8.5" y1="12" y2="12"></line> <line fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.4" x1="12" x2="12" y1="15.5" y2="8.5"></line> </g> </g> </g> </g></svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
@@ -0,0 +1,12 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="256" height="256" viewBox="0 0 256 256" xml:space="preserve">
|
||||||
|
|
||||||
|
<defs>
|
||||||
|
</defs>
|
||||||
|
<g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)" >
|
||||||
|
<path d="M 37.712 41.541 c -2.437 -10.14 2.919 -19.609 8.772 -25.137 c -6.221 11.54 -7.41 20.104 -3.461 33.177 l 2.29 -0.854 c -0.882 -2.464 -1.413 -4.873 -1.685 -7.241 c 8.23 -2.355 13.883 -7.209 15.231 -15.926 C 59.796 13.651 52.042 6.72 43.718 0.117 c 3.04 9.758 -11.581 17.964 -10.296 30.949 c 0.271 2.741 0.697 5.33 1.326 7.825" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(127,178,65); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
|
||||||
|
<path d="M 34.069 30.999 c 0.917 -12.923 13.599 -21.098 9.649 -30.883 c 1.394 8.216 -9.771 12.38 -12.663 22.195 c -1.575 5.836 -1.151 11.452 3.693 16.579 C 34.119 36.396 33.937 33.751 34.069 30.999 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(113,156,64); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
|
||||||
|
<polygon points="68.77,61.09 70.46,47.61 43.69,47.61 19.54,47.61 21.23,61.09 " style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(160,126,99); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) "/>
|
||||||
|
<polyline points="63.11,61.09 59.5,90 44.01,90 30.5,90 26.89,61.09 " style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(160,126,99); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) "/>
|
||||||
|
<polygon points="62.61,65.09 63.11,61.09 26.89,61.09 27.39,65.09 " style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(145,107,77); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) "/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.3 KiB |
@@ -44,11 +44,11 @@ function App() {
|
|||||||
loader ? "block" : "hidden"
|
loader ? "block" : "hidden"
|
||||||
} absolute w-full h-full bg-black opacity-50 top-0 left-0`}
|
} absolute w-full h-full bg-black opacity-50 top-0 left-0`}
|
||||||
>
|
>
|
||||||
<div class="text-center my-96">
|
<div className="text-center my-96">
|
||||||
<div role="status">
|
<div role="status">
|
||||||
<svg
|
<svg
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
class="inline w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-blue-900"
|
className="inline w-12 h-12 text-gray-200 animate-spin dark:text-gray-600 fill-blue-900"
|
||||||
viewBox="0 0 100 101"
|
viewBox="0 0 100 101"
|
||||||
fill="none"
|
fill="none"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
@@ -62,7 +62,7 @@ function App() {
|
|||||||
fill="currentFill"
|
fill="currentFill"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
<span class="sr-only">Loading...</span>
|
<span className="sr-only">Loading...</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -0,0 +1,61 @@
|
|||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import Td from "./Td";
|
||||||
|
|
||||||
|
const FarmList = () => {
|
||||||
|
const [data, setData] = useState([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
useEffect(() => {
|
||||||
|
fetch("http://localhost:8000/api/v1/farm", {
|
||||||
|
credentials: "include",
|
||||||
|
method: "GET",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
})
|
||||||
|
.then((response) => response.json())
|
||||||
|
.then((data) => setData(data))
|
||||||
|
.then(setLoading(false))
|
||||||
|
.catch((error) => console.error(error));
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative overflow-x-auto shadow-md sm:rounded-lg">
|
||||||
|
{loading ? (
|
||||||
|
<div>Loading...</div>
|
||||||
|
) : (
|
||||||
|
<table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
|
||||||
|
<thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
|
||||||
|
<tr>
|
||||||
|
<th scope="col" className="px-6 py-3">
|
||||||
|
Farm name
|
||||||
|
</th>
|
||||||
|
<th scope="col" className="px-6 py-3">
|
||||||
|
Location
|
||||||
|
</th>
|
||||||
|
<th scope="col" className="px-6 py-3">
|
||||||
|
Type
|
||||||
|
</th>
|
||||||
|
<th scope="col" className="px-6 py-3">
|
||||||
|
Size (acres)
|
||||||
|
</th>
|
||||||
|
<th scope="col" className="px-6 py-3">
|
||||||
|
Action
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{data.length > 0 ? (
|
||||||
|
data.map((item) => <Td key={item.id} children={item} />)
|
||||||
|
) : (
|
||||||
|
<tr>
|
||||||
|
<td colSpan={5} className="text-center">
|
||||||
|
No data available
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
)}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FarmList;
|
||||||
@@ -0,0 +1,69 @@
|
|||||||
|
import { Link } from "react-router-dom";
|
||||||
|
|
||||||
|
const Logs = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="relative overflow-y-hidden">
|
||||||
|
<table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 border">
|
||||||
|
<thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
|
||||||
|
<tr>
|
||||||
|
<th scope="col" className="px-6 py-3">
|
||||||
|
Product name
|
||||||
|
</th>
|
||||||
|
<th scope="col" className="px-6 py-3">
|
||||||
|
Color
|
||||||
|
</th>
|
||||||
|
<th scope="col" className="px-6 py-3">
|
||||||
|
Category
|
||||||
|
</th>
|
||||||
|
<th scope="col" className="px-6 py-3">
|
||||||
|
Price
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 border-gray-200">
|
||||||
|
<th
|
||||||
|
scope="row"
|
||||||
|
className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
|
||||||
|
>
|
||||||
|
Apple MacBook Pro 17"
|
||||||
|
</th>
|
||||||
|
<td className="px-6 py-4">Silver</td>
|
||||||
|
<td className="px-6 py-4">Laptop</td>
|
||||||
|
<td className="px-6 py-4">$2999</td>
|
||||||
|
</tr>
|
||||||
|
<tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700 border-gray-200">
|
||||||
|
<th
|
||||||
|
scope="row"
|
||||||
|
className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
|
||||||
|
>
|
||||||
|
Microsoft Surface Pro
|
||||||
|
</th>
|
||||||
|
<td className="px-6 py-4">White</td>
|
||||||
|
<td className="px-6 py-4">Laptop PC</td>
|
||||||
|
<td className="px-6 py-4">$1999</td>
|
||||||
|
</tr>
|
||||||
|
<tr className="bg-white dark:bg-gray-800">
|
||||||
|
<th
|
||||||
|
scope="row"
|
||||||
|
className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white"
|
||||||
|
>
|
||||||
|
Magic Mouse 2
|
||||||
|
</th>
|
||||||
|
<td className="px-6 py-4">Black</td>
|
||||||
|
<td className="px-6 py-4">Accessories</td>
|
||||||
|
<td className="px-6 py-4">$99</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>{" "}
|
||||||
|
</table>{" "}
|
||||||
|
<Link to="/logs" className="text-[#2323FF] pl-5">
|
||||||
|
<hr />
|
||||||
|
View all Logs
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Logs;
|
||||||
@@ -0,0 +1,30 @@
|
|||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
|
||||||
|
const Td = ({ children }) => {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
return (
|
||||||
|
<tr className="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700 border-gray-200">
|
||||||
|
<td
|
||||||
|
className="px-6 py-4"
|
||||||
|
onClick={() => {
|
||||||
|
navigate(`farmpage/${children._id}`);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{children.name}
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4">{children.location}</td>
|
||||||
|
<td className="px-6 py-4">{children.soilType}</td>
|
||||||
|
<td className="px-6 py-4">{children.size}</td>
|
||||||
|
<td className="px-6 py-4">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="font-medium text-blue-600 dark:text-blue-500 hover:underline"
|
||||||
|
>
|
||||||
|
Edit
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Td;
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
const TotalSpent = () => {
|
||||||
|
return (
|
||||||
|
<div className="h-full">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="h-full block max-w-sm p-6 bg-no-repeat bg-center bg-cover border border-gray-200 rounded-lg shadow-sm hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700"
|
||||||
|
>
|
||||||
|
<h5 className="mb-2 text-4xl font-bold tracking-tight text-gray-900 dark:text-white">
|
||||||
|
100,000
|
||||||
|
</h5>
|
||||||
|
<p className="font-normal text-gray-700 dark:text-gray-400">
|
||||||
|
This is the total cost which you spent on this farm
|
||||||
|
</p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TotalSpent;
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
// ActivityFeed.jsx
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
const ActivityFeed = () => {
|
||||||
|
// Hard-coded activity feed data
|
||||||
|
const activities = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
description: "Farm A reported increased yield",
|
||||||
|
time: "10 mins ago",
|
||||||
|
},
|
||||||
|
{ id: 2, description: "Sensor B recalibrated", time: "20 mins ago" },
|
||||||
|
{ id: 3, description: "Alert triggered on Farm C", time: "30 mins ago" },
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ul className="space-y-2">
|
||||||
|
{activities.map((activity) => (
|
||||||
|
<li key={activity.id} className="bg-gray-50 p-2 rounded shadow">
|
||||||
|
<p className="text-sm">{activity.description}</p>
|
||||||
|
<span className="text-xs text-gray-500">{activity.time}</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ActivityFeed;
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
// AlertsPanel.jsx
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
const AlertsPanel = () => {
|
||||||
|
// Hard-coded alerts data
|
||||||
|
const alerts = [
|
||||||
|
{ id: 1, message: "Temperature exceeds threshold", type: "warning" },
|
||||||
|
{ id: 2, message: "New sensor connected", type: "info" },
|
||||||
|
{ id: 3, message: "Power consumption high", type: "warning" },
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{alerts.map((alert) => (
|
||||||
|
<div
|
||||||
|
key={alert.id}
|
||||||
|
className={`p-2 rounded mb-2 ${
|
||||||
|
alert.type === "warning" ? "bg-red-100" : "bg-blue-100"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<p className="text-sm">{alert.message}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AlertsPanel;
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
// MetricsCard.jsx
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
const MetricsCard = ({ title, value }) => {
|
||||||
|
return (
|
||||||
|
<div className="bg-white p-4 rounded-lg shadow">
|
||||||
|
<h3 className="text-gray-500 text-sm font-medium">{title}</h3>
|
||||||
|
<p className="text-2xl font-bold">{value}</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MetricsCard;
|
||||||
@@ -0,0 +1,50 @@
|
|||||||
|
// PerformanceChart.jsx
|
||||||
|
import React from "react";
|
||||||
|
import { Line } from "react-chartjs-2";
|
||||||
|
import {
|
||||||
|
Chart as ChartJS,
|
||||||
|
CategoryScale,
|
||||||
|
LinearScale,
|
||||||
|
PointElement,
|
||||||
|
LineElement,
|
||||||
|
Title,
|
||||||
|
Tooltip,
|
||||||
|
Legend,
|
||||||
|
} from "chart.js";
|
||||||
|
|
||||||
|
ChartJS.register(
|
||||||
|
CategoryScale,
|
||||||
|
LinearScale,
|
||||||
|
PointElement,
|
||||||
|
LineElement,
|
||||||
|
Title,
|
||||||
|
Tooltip,
|
||||||
|
Legend
|
||||||
|
);
|
||||||
|
|
||||||
|
const PerformanceChart = () => {
|
||||||
|
const data = {
|
||||||
|
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
label: "Yield",
|
||||||
|
data: [65, 59, 80, 81, 56, 55, 70], // hard-coded values
|
||||||
|
fill: false,
|
||||||
|
backgroundColor: "rgb(75, 192, 192)",
|
||||||
|
borderColor: "rgba(75, 192, 192, 0.2)",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
const options = {
|
||||||
|
responsive: true,
|
||||||
|
plugins: {
|
||||||
|
legend: { position: "top" },
|
||||||
|
title: { display: true, text: "Performance Trend" },
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
return <Line data={data} options={options} />;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PerformanceChart;
|
||||||
@@ -0,0 +1,46 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
import Chart from "react-apexcharts";
|
||||||
|
|
||||||
|
const Piechart = () => {
|
||||||
|
const [series, setSeries] = useState([35.1, 23.5, 2.4, 5.4]);
|
||||||
|
|
||||||
|
const chartOptions = {
|
||||||
|
series: series,
|
||||||
|
labels: ["Fertilizers", "Pestisides", "Manner", "Urea"],
|
||||||
|
colors: ["#1C64F2", "#16BDCA", "#FDBA8C", "#E74694"],
|
||||||
|
chart: {
|
||||||
|
type: "donut",
|
||||||
|
height: 320,
|
||||||
|
},
|
||||||
|
plotOptions: {
|
||||||
|
pie: {
|
||||||
|
donut: {
|
||||||
|
labels: {
|
||||||
|
show: true,
|
||||||
|
total: {
|
||||||
|
show: true,
|
||||||
|
label: "Total",
|
||||||
|
formatter: function (w) {
|
||||||
|
return w.globals.seriesTotals.reduce((a, b) => a + b, 0) + "k";
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
position: "bottom",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-white md:p-6 block max-w-sm p-6 bg-no-repeat bg-center bg-cover border border-gray-200 rounded-lg shadow-sm hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
|
||||||
|
<h5 className="text-xl font-bold text-gray-900 dark:text-white mb-4 ">
|
||||||
|
Cost Analysis
|
||||||
|
</h5>
|
||||||
|
<Chart options={chartOptions} series={series} type="donut" height={320} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Piechart;
|
||||||
@@ -1,3 +1,7 @@
|
|||||||
@tailwind base;
|
@tailwind base;
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
|
@theme {
|
||||||
|
--color-midnight: #A3D1C6;
|
||||||
|
}
|
||||||
+35
-31
@@ -22,43 +22,47 @@ import Settings from "./pages/UserPanel/Settings.jsx";
|
|||||||
import ScheduleMeeting from "./pages/UserPanel/ScheduleMeeting.jsx";
|
import ScheduleMeeting from "./pages/UserPanel/ScheduleMeeting.jsx";
|
||||||
import Support from "./pages/UserPanel/Support.jsx";
|
import Support from "./pages/UserPanel/Support.jsx";
|
||||||
import FeedBackAndRatings from "./pages/UserPanel/FeedBackAndRatings.jsx";
|
import FeedBackAndRatings from "./pages/UserPanel/FeedBackAndRatings.jsx";
|
||||||
|
import Monitoring from "./pages/UserPanel/Monitoring.jsx";
|
||||||
|
import AddFarm from "./pages/UserPanel/Farm/AddFarm.jsx";
|
||||||
|
import UpdateFarm from "./pages/UserPanel/Farm/UpdateForm.jsx";
|
||||||
|
import FarmPage from "./pages/UserPanel/Farm/FarmPage.jsx";
|
||||||
createRoot(document.getElementById("root")).render(
|
createRoot(document.getElementById("root")).render(
|
||||||
<StrictMode>
|
<StrictMode>
|
||||||
<Provider store={MentifyStore}>
|
<Provider store={MentifyStore}>
|
||||||
<SocketProvider>
|
<BrowserRouter>
|
||||||
<BrowserRouter>
|
<Routes>
|
||||||
<Routes>
|
{/* Routes for the main App */}
|
||||||
{/* Routes for the main App */}
|
<Route path="/" element={<App />}>
|
||||||
<Route path="/" element={<App />}>
|
<Route index element={<HomePage />} />
|
||||||
<Route index element={<HomePage />} />
|
<Route path="home" element={<HomePage />} />
|
||||||
<Route path="home" element={<HomePage />} />
|
</Route>
|
||||||
</Route>
|
|
||||||
|
|
||||||
{/* User related routes */}
|
{/* User related routes */}
|
||||||
<Route path="user" element={<App />}>
|
<Route path="user" element={<App />}>
|
||||||
<Route path="login" element={<LoginPage />} />
|
<Route path="login" element={<LoginPage />} />
|
||||||
<Route path="signup" element={<SignupPage />} />
|
<Route path="signup" element={<SignupPage />} />
|
||||||
<Route path="forgetpassword" element={<ForgetPassword />} />
|
<Route path="forgetpassword" element={<ForgetPassword />} />
|
||||||
<Route
|
<Route
|
||||||
path="api/v1/password/reset/:token"
|
path="api/v1/password/reset/:token"
|
||||||
element={<ResetPassword />}
|
element={<ResetPassword />}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Route path="dashboard" element={<MainUserPanel />}>
|
<Route path="dashboard" element={<MainUserPanel />}>
|
||||||
<Route index element={<Dashboard />} />
|
<Route index element={<Dashboard />} />
|
||||||
<Route path="history" element={<History />} />
|
<Route path="history" element={<History />} />
|
||||||
<Route path="notifications" element={<Notifications />} />
|
<Route path="notifications" element={<Notifications />} />
|
||||||
<Route path="settings" element={<Settings />} />
|
<Route path="settings" element={<Settings />} />
|
||||||
<Route path="scheduledmeetings" element={<ScheduleMeeting />} />
|
<Route path="scheduledmeetings" element={<ScheduleMeeting />} />
|
||||||
<Route path="support" element={<Support />} />
|
<Route path="support" element={<Support />} />
|
||||||
<Route path="feedback" element={<FeedBackAndRatings />} />
|
<Route path="feedback" element={<FeedBackAndRatings />} />
|
||||||
</Route>
|
<Route path="monitoring" element={<Monitoring />} />
|
||||||
|
<Route path="addfarm" element={<AddFarm />} />
|
||||||
|
<Route path="updatefarm" element={<UpdateFarm />} />
|
||||||
|
<Route path="farmpage/:farmId" element={<FarmPage />} />
|
||||||
</Route>
|
</Route>
|
||||||
</Routes>
|
</Route>
|
||||||
</BrowserRouter>
|
</Routes>
|
||||||
</SocketProvider>
|
</BrowserRouter>
|
||||||
</Provider>
|
</Provider>
|
||||||
</StrictMode>
|
</StrictMode>
|
||||||
);
|
);
|
||||||
d;
|
|
||||||
|
|||||||
@@ -162,7 +162,7 @@ const SubjectSection = () => {
|
|||||||
>
|
>
|
||||||
<div className="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 md:w-9 md:h-9 text-gray-500 bg-gray-100 rounded-lg dark:bg-gray-800 dark:text-gray-200">
|
<div className="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 md:w-9 md:h-9 text-gray-500 bg-gray-100 rounded-lg dark:bg-gray-800 dark:text-gray-200">
|
||||||
<FaReplyAll className="text-base sm:text-xl" />
|
<FaReplyAll className="text-base sm:text-xl" />
|
||||||
<span class="sr-only">Check icon</span>
|
<span className="sr-only">Check icon</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="ms-3 text-base sm:text-xl font-bold text-black font-sans">
|
<div className="ms-3 text-base sm:text-xl font-bold text-black font-sans">
|
||||||
See all
|
See all
|
||||||
|
|||||||
@@ -109,7 +109,7 @@ const ResetPassword = () => {
|
|||||||
|
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
class="focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-base px-5 py-2.5 mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900"
|
className="focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-base px-5 py-2.5 mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900"
|
||||||
>
|
>
|
||||||
Reset Password
|
Reset Password
|
||||||
</button>
|
</button>
|
||||||
@@ -127,5 +127,4 @@ const ResetPassword = () => {
|
|||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default ResetPassword;
|
export default ResetPassword;
|
||||||
|
|||||||
@@ -1,202 +1,23 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
import Piechart from "../../components/monitoring charts/Piechart";
|
||||||
|
import TotalSpent from "../../components/TotalSpent";
|
||||||
|
import FarmList from "../../components/FarmList";
|
||||||
|
import AddFarm from "./Farm/AddFarm";
|
||||||
|
|
||||||
const Dashboard = () => {
|
const Dashboard = () => {
|
||||||
return (
|
return (
|
||||||
<>
|
<div className="w-full bg-white rounded-lg shadow p-4">
|
||||||
|
<div className="mb-4 flex justify-end space-x-4">
|
||||||
<div className="w-full bg-white rounded-lg shadow p-4">
|
<AddFarm />
|
||||||
<div className="flex flex-col justify-center items-center mb-4">
|
|
||||||
<h2 className="text-2xl font-bold font-sans border-b-2 py-2">
|
|
||||||
Upcoming Sessions{" "}
|
|
||||||
</h2>
|
|
||||||
<div className="bg-gray-300 w-full h-52 rounded-lg"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mb-4">
|
|
||||||
<h3 className="text-lg font-medium">Recent Activity</h3>
|
|
||||||
<p className="text-gray-500 text-sm mt-2">
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
||||||
</p>
|
|
||||||
<div className="grid grid-cols-1 gap-4 mt-4">
|
|
||||||
<input type="range" className="w-full h-auto" readOnly:true/>
|
|
||||||
<div className="bg-gray-100 rounded-lg p-4 flex justify-between items-center">
|
|
||||||
|
|
||||||
<div className="flex items-center">
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
className="h-6 w-6 text-green-500"
|
|
||||||
fill="none"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeWidth="2"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
d="M13 7l5 5m0 0l-5 5m5-5H6"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
<span className="ml-2 font-medium">Topup</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center">
|
|
||||||
<span className="text-gray-500 text-sm">06:24:45 AM</span>
|
|
||||||
<span className="ml-2 text-green-500 text-sm">+$5,553</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="mb-4">
|
|
||||||
<h3 className="text-lg font-medium">Weekly Summary</h3>
|
|
||||||
<div className="grid grid-cols-8 gap-2 mt-4">
|
|
||||||
<div className="col-span-1 flex flex-col justify-between items-center bg-gray-100 rounded-lg p-2">
|
|
||||||
<span className="text-gray-500 text-xs">Sun</span>
|
|
||||||
</div>
|
|
||||||
<div className="col-span-1 flex flex-col justify-between items-center bg-gray-100 rounded-lg p-2">
|
|
||||||
<span className="text-gray-500 text-xs">Mon</span>
|
|
||||||
</div>
|
|
||||||
<div className="col-span-1 flex flex-col justify-between items-center bg-gray-100 rounded-lg p-2">
|
|
||||||
<span className="text-gray-500 text-xs">Tue</span>
|
|
||||||
</div>
|
|
||||||
<div className="col-span-1 flex flex-col justify-between items-center bg-gray-100 rounded-lg p-2">
|
|
||||||
<span className="text-gray-500 text-xs">Wed</span>
|
|
||||||
</div>
|
|
||||||
<div className="col-span-1 flex flex-col justify-between items-center bg-gray-100 rounded-lg p-2">
|
|
||||||
<span className="text-gray-500 text-xs">Thu</span>
|
|
||||||
</div>
|
|
||||||
<div className="col-span-1 flex flex-col justify-between items-center bg-gray-100 rounded-lg p-2">
|
|
||||||
<span className="text-gray-500 text-xs">Fri</span>
|
|
||||||
</div>
|
|
||||||
<div className="col-span-1 flex flex-col justify-between items-center bg-gray-100 rounded-lg p-2">
|
|
||||||
<span className="text-gray-500 text-xs">Sat</span>
|
|
||||||
</div>
|
|
||||||
<div className="col-span-1 flex flex-col justify-between items-center bg-gray-100 rounded-lg p-2">
|
|
||||||
<span className="text-gray-500 text-xs">Completed</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="grid grid-cols-8 gap-2 mt-2">
|
|
||||||
<div
|
|
||||||
className="col-span-1 flex flex-col justify-between items-center rounded-lg p-2"
|
|
||||||
style={{ height: "100px" }}
|
|
||||||
>
|
|
||||||
<div className="bg-green-500 rounded-t-lg h-16"></div>
|
|
||||||
<div className="bg-gray-300 h-4"></div>
|
|
||||||
<div className="bg-red-500 rounded-b-lg h-16"></div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="col-span-1 flex flex-col justify-between items-center rounded-lg p-2"
|
|
||||||
style={{ height: "100px" }}
|
|
||||||
>
|
|
||||||
<div className="bg-green-500 rounded-t-lg h-20"></div>
|
|
||||||
<div className="bg-gray-300 h-8"></div>
|
|
||||||
<div className="bg-red-500 rounded-b-lg h-12"></div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="col-span-1 flex flex-col justify-between items-center rounded-lg p-2"
|
|
||||||
style={{ height: "100px" }}
|
|
||||||
>
|
|
||||||
<div className="bg-green-500 rounded-t-lg h-12"></div>
|
|
||||||
<div className="bg-gray-300 h-12"></div>
|
|
||||||
<div className="bg-red-500 rounded-b-lg h-20"></div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="col-span-1 flex flex-col justify-between items-center rounded-lg p-2"
|
|
||||||
style={{ height: "100px" }}
|
|
||||||
>
|
|
||||||
<div className="bg-green-500 rounded-t-lg h-24"></div>
|
|
||||||
<div className="bg-gray-300 h-4"></div>
|
|
||||||
<div className="bg-red-500 rounded-b-lg h-8"></div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="col-span-1 flex flex-col justify-between items-center rounded-lg p-2"
|
|
||||||
style={{ height: "100px" }}
|
|
||||||
>
|
|
||||||
<div className="bg-green-500 rounded-t-lg h-16"></div>
|
|
||||||
<div className="bg-gray-300 h-12"></div>
|
|
||||||
<div className="bg-red-500 rounded-b-lg h-16"></div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="col-span-1 flex flex-col justify-between items-center rounded-lg p-2"
|
|
||||||
style={{ height: "100px" }}
|
|
||||||
>
|
|
||||||
<div className="bg-green-500 rounded-t-lg h-16"></div>
|
|
||||||
<div className="bg-gray-300 h-4"></div>
|
|
||||||
<div className="bg-red-500 rounded-b-lg h-24"></div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="col-span-1 flex flex-col justify-between items-center rounded-lg p-2"
|
|
||||||
style={{ height: "100px" }}
|
|
||||||
>
|
|
||||||
<div className="bg-green-500 rounded-t-lg h-8"></div>
|
|
||||||
<div className="bg-gray-300 h-16"></div>
|
|
||||||
<div className="bg-red-500 rounded-b-lg h-20"></div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="col-span-1 flex flex-col justify-between items-center rounded-lg p-2"
|
|
||||||
style={{ height: "100px" }}
|
|
||||||
>
|
|
||||||
<div className="bg-gray-300 h-24"></div>
|
|
||||||
<div className="bg-gray-300 h-24"></div>
|
|
||||||
<div className="bg-gray-300 h-24"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="mb-4">
|
|
||||||
<h3 className="text-lg font-medium">Notifications</h3>
|
|
||||||
<div className="grid grid-cols-1 gap-4 mt-4">
|
|
||||||
<div className="bg-gray-100 rounded-lg p-4 flex justify-between items-center">
|
|
||||||
<div className="flex items-center">
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
className="h-6 w-6 text-green-500"
|
|
||||||
fill="none"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeWidth="2"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
d="M13 7l5 5m0 0l-5 5m5-5H6"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
<span className="ml-2 font-medium">Topup</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center">
|
|
||||||
<span className="text-gray-500 text-sm">06:24:45 AM</span>
|
|
||||||
<span className="ml-2 text-green-500 text-sm">+$5,553</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 gap-4 mt-4">
|
|
||||||
<div className="bg-gray-100 rounded-lg p-4 flex justify-between items-center">
|
|
||||||
<div className="flex items-center">
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
className="h-6 w-6 text-green-500"
|
|
||||||
fill="none"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeWidth="2"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
d="M13 7l5 5m0 0l-5 5m5-5H6"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
<span className="ml-2 font-medium">Topup</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center">
|
|
||||||
<span className="text-gray-500 text-sm">06:24:45 AM</span>
|
|
||||||
<span className="ml-2 text-green-500 text-sm">+$5,553</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</>
|
|
||||||
|
<div className="mb-4 flex space-x-4">
|
||||||
|
<Piechart />
|
||||||
|
<TotalSpent />
|
||||||
|
</div>
|
||||||
|
<FarmList />
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Dashboard;
|
export default Dashboard;
|
||||||
|
|||||||
@@ -0,0 +1,240 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
|
||||||
|
const AddCrop = ({ farmId }) => {
|
||||||
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||||
|
const [name, setName] = useState("");
|
||||||
|
const [farm, setFarm] = useState(farmId);
|
||||||
|
const [harvestDate, setHarvestDate] = useState("");
|
||||||
|
const [growthStage, setGrowthStage] = useState("Planted");
|
||||||
|
|
||||||
|
const [healthStatus, setHealthStatus] = useState("");
|
||||||
|
const [image, setImage] = useState(null);
|
||||||
|
const [uploading, setUploading] = useState(false);
|
||||||
|
const [error, setError] = useState("");
|
||||||
|
const [success, setSuccess] = useState("");
|
||||||
|
|
||||||
|
const handleSubmit = async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setUploading(true);
|
||||||
|
setError("");
|
||||||
|
setSuccess("");
|
||||||
|
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append("name", name);
|
||||||
|
formData.append("farm", farm);
|
||||||
|
formData.append("harvestDate", harvestDate);
|
||||||
|
formData.append("growthStage", growthStage);
|
||||||
|
formData.append("healthStatus", healthStatus);
|
||||||
|
if (image) {
|
||||||
|
formData.append("image", image);
|
||||||
|
}
|
||||||
|
console.log(formData);
|
||||||
|
try {
|
||||||
|
const response = await fetch(`http://localhost:8000/api/v1/crop`, {
|
||||||
|
method: "POST",
|
||||||
|
credentials: "include",
|
||||||
|
body: formData,
|
||||||
|
});
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error("Failed to create crop");
|
||||||
|
}
|
||||||
|
setSuccess("Crop created successfully!");
|
||||||
|
// Reset form fields
|
||||||
|
setName("");
|
||||||
|
setFarm("");
|
||||||
|
setHarvestDate("");
|
||||||
|
setGrowthStage("");
|
||||||
|
setHealthStatus("");
|
||||||
|
setImage(null);
|
||||||
|
} catch (err) {
|
||||||
|
setError(err.message);
|
||||||
|
} finally {
|
||||||
|
setUploading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<button
|
||||||
|
onClick={() => setIsModalOpen(true)}
|
||||||
|
className="block text-white bg-green-500 hover:bg-green-600 focus:ring-4 focus:outline-none focus:ring-green-300 rounded-lg text-sm px-5 py-2.5 text-center h-10 font-extrabold"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
Add New Crop
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{isModalOpen && (
|
||||||
|
<div className="fixed inset-0 z-50 flex items-center justify-center overflow-y-auto overflow-x-hidden">
|
||||||
|
{/* Backdrop */}
|
||||||
|
<div
|
||||||
|
className="fixed inset-0 bg-black bg-opacity-50 transition-opacity"
|
||||||
|
onClick={() => setIsModalOpen(false)}
|
||||||
|
></div>
|
||||||
|
{/* Modal Content */}
|
||||||
|
<div className="relative w-full max-w-2xl mx-4">
|
||||||
|
<div className="relative bg-white rounded-xl shadow-lg">
|
||||||
|
{/* Decorative SVG Elements */}
|
||||||
|
<div className="absolute right-0 top-0 h-full w-48 overflow-hidden pointer-events-none">
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 200 800"
|
||||||
|
className="absolute right-0 h-full transform translate-x-16 fill-green-100"
|
||||||
|
>
|
||||||
|
<path d="M0,0 Q100,200 0,400 Q100,600 0,800 L200,800 L200,0 Z" />
|
||||||
|
</svg>
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 200 800"
|
||||||
|
className="absolute right-0 h-full transform translate-x-8 fill-green-200/40"
|
||||||
|
>
|
||||||
|
<path d="M0,0 Q80,200 0,400 Q80,600 0,800 L200,800 L200,0 Z" />
|
||||||
|
</svg>
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 100 100"
|
||||||
|
className="absolute right-12 top-20 w-16 h-16 fill-green-300/30"
|
||||||
|
>
|
||||||
|
<path d="M50,0 Q100,50 50,100 Q0,50 50,0 Z" />
|
||||||
|
</svg>
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 100 100"
|
||||||
|
className="absolute right-16 top-48 w-12 h-12 fill-green-400/20"
|
||||||
|
>
|
||||||
|
<path d="M50,0 Q100,50 50,100 Q0,50 50,0 Z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
{/* Modal Header */}
|
||||||
|
<div className="flex items-center justify-between p-4 md:p-5 border-b rounded-t border-gray-200">
|
||||||
|
<h3 className="text-2xl font-semibold text-gray-800">
|
||||||
|
Add New Crop
|
||||||
|
</h3>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setIsModalOpen(false)}
|
||||||
|
className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 inline-flex justify-center items-center"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className="w-3 h-3"
|
||||||
|
aria-hidden="true"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 14 14"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span className="sr-only">Close modal</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{/* Modal Body */}
|
||||||
|
<div className="p-4 md:p-5">
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
htmlFor="name"
|
||||||
|
className="block text-sm font-medium text-gray-700"
|
||||||
|
>
|
||||||
|
Crop Name
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="name"
|
||||||
|
value={name}
|
||||||
|
onChange={(e) => setName(e.target.value)}
|
||||||
|
placeholder="Rice"
|
||||||
|
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
htmlFor="harvestDate"
|
||||||
|
className="block text-sm font-medium text-gray-700"
|
||||||
|
>
|
||||||
|
Harvest Date
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="date"
|
||||||
|
id="harvestDate"
|
||||||
|
value={harvestDate}
|
||||||
|
onChange={(e) => setHarvestDate(e.target.value)}
|
||||||
|
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
htmlFor="growthStage"
|
||||||
|
className="block text-sm font-medium text-gray-700"
|
||||||
|
>
|
||||||
|
Growth Stage
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
id="growthStage"
|
||||||
|
value={growthStage}
|
||||||
|
onChange={(e) => setGrowthStage(e.target.value)}
|
||||||
|
className="mt-1 block w-full px-3 py-2 rounded-md border-gray-300 shadow-sm"
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<option value="Planted">Planted</option>
|
||||||
|
<option value="Growing">Growing</option>
|
||||||
|
<option value="Ready to Harvest">Ready to Harvest</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
htmlFor="healthStatus"
|
||||||
|
className="block text-sm font-medium text-gray-700"
|
||||||
|
>
|
||||||
|
Health Status
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="healthStatus"
|
||||||
|
value={healthStatus}
|
||||||
|
onChange={(e) => setHealthStatus(e.target.value)}
|
||||||
|
placeholder="Healthy"
|
||||||
|
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
htmlFor="image"
|
||||||
|
className="block text-sm font-medium text-gray-700"
|
||||||
|
>
|
||||||
|
Crop Image
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
id="image"
|
||||||
|
accept="image/*"
|
||||||
|
onChange={(e) => setImage(e.target.files[0])}
|
||||||
|
className="mt-1 block w-full"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="w-full bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700 transition"
|
||||||
|
>
|
||||||
|
{uploading ? "Uploading..." : "Create Crop"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{error && <p className="text-red-600">{error}</p>}
|
||||||
|
{success && <p className="text-green-600">{success}</p>}
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AddCrop;
|
||||||
@@ -0,0 +1,250 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
|
||||||
|
const AddFarm = () => {
|
||||||
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||||
|
const [farmName, setFarmName] = useState("");
|
||||||
|
const [location, setLocation] = useState("");
|
||||||
|
const [waterContent, setWaterContent] = useState("");
|
||||||
|
const [sizeContent, setSizeContent] = useState("");
|
||||||
|
const [soilType, setSoilType] = useState("");
|
||||||
|
const [error, setError] = useState(null);
|
||||||
|
const [success, setSuccess] = useState(false);
|
||||||
|
const navigator = useNavigate();
|
||||||
|
const handleSubmit = async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const farmData = {
|
||||||
|
name: farmName,
|
||||||
|
location,
|
||||||
|
waterContent,
|
||||||
|
soilType,
|
||||||
|
size: sizeContent,
|
||||||
|
};
|
||||||
|
|
||||||
|
console.log(farmData);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch("http://localhost:8000/api/v1/farm", {
|
||||||
|
method: "POST",
|
||||||
|
credentials: "include",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
body: JSON.stringify(farmData),
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
console.log(data);
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error("Failed to add farm");
|
||||||
|
}
|
||||||
|
|
||||||
|
navigator("farmpage");
|
||||||
|
setSuccess(true);
|
||||||
|
setError(null);
|
||||||
|
setIsModalOpen(false);
|
||||||
|
} catch (err) {
|
||||||
|
setError(err.message);
|
||||||
|
setSuccess(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<button
|
||||||
|
onClick={() => setIsModalOpen(true)}
|
||||||
|
className="block text-white bg-green-600 hover:bg-green-700 focus:ring-4 focus:outline-none focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
Add New Farm
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{isModalOpen && (
|
||||||
|
<div className="fixed inset-0 z-50 overflow-y-auto overflow-x-hidden flex items-center justify-center">
|
||||||
|
<div
|
||||||
|
className="fixed inset-0 bg-black bg-opacity-50 transition-opacity"
|
||||||
|
onClick={() => setIsModalOpen(false)}
|
||||||
|
></div>
|
||||||
|
|
||||||
|
<div className="relative w-full max-w-2xl mx-4">
|
||||||
|
<div className="relative bg-white rounded-xl shadow-lg">
|
||||||
|
{/* Decorative Leaves */}
|
||||||
|
<div className="absolute right-0 top-0 h-full w-48 overflow-hidden pointer-events-none">
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 200 800"
|
||||||
|
className="absolute right-0 h-full transform translate-x-16 fill-green-100"
|
||||||
|
>
|
||||||
|
<path d="M0,0 Q100,200 0,400 Q100,600 0,800 L200,800 L200,0 Z" />
|
||||||
|
</svg>
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 200 800"
|
||||||
|
className="absolute right-0 h-full transform translate-x-8 fill-green-200/40"
|
||||||
|
>
|
||||||
|
<path d="M0,0 Q80,200 0,400 Q80,600 0,800 L200,800 L200,0 Z" />
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 100 100"
|
||||||
|
className="absolute right-12 top-20 w-16 h-16 fill-green-300/30"
|
||||||
|
>
|
||||||
|
<path d="M50,0 Q100,50 50,100 Q0,50 50,0 Z" />
|
||||||
|
</svg>
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 100 100"
|
||||||
|
className="absolute right-16 top-48 w-12 h-12 fill-green-400/20"
|
||||||
|
>
|
||||||
|
<path d="M50,0 Q100,50 50,100 Q0,50 50,0 Z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Modal Header */}
|
||||||
|
<div className="flex items-center justify-between p-4 md:p-5 border-b rounded-t border-gray-200">
|
||||||
|
<h3 className="text-2xl font-semibold text-gray-800">
|
||||||
|
Add New Farm
|
||||||
|
</h3>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setIsModalOpen(false)}
|
||||||
|
className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 inline-flex justify-center items-center"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className="w-3 h-3"
|
||||||
|
aria-hidden="true"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 14 14"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span className="sr-only">Close modal</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Modal Body */}
|
||||||
|
<div className="p-4 md:p-5">
|
||||||
|
<form className="space-y-4" onSubmit={handleSubmit}>
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
htmlFor="farmName"
|
||||||
|
className="block text-sm font-semibold text-gray-700 mb-2"
|
||||||
|
>
|
||||||
|
Farm Name
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="farmName"
|
||||||
|
value={farmName}
|
||||||
|
onChange={(e) => setFarmName(e.target.value)}
|
||||||
|
className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:ring-2 focus:ring-green-400 focus:border-transparent transition duration-200 ease-in-out bg-white/80"
|
||||||
|
placeholder="Enter farm name"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
htmlFor="location"
|
||||||
|
className="block text-sm font-semibold text-gray-700 mb-2"
|
||||||
|
>
|
||||||
|
Location
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="location"
|
||||||
|
value={location}
|
||||||
|
onChange={(e) => setLocation(e.target.value)}
|
||||||
|
className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:ring-2 focus:ring-green-400 focus:border-transparent transition duration-200 ease-in-out bg-white/80"
|
||||||
|
placeholder="Enter location"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
htmlFor="waterContent"
|
||||||
|
className="block text-sm font-semibold text-gray-700 mb-2"
|
||||||
|
>
|
||||||
|
Water Content
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="waterContent"
|
||||||
|
value={waterContent}
|
||||||
|
onChange={(e) => setWaterContent(e.target.value)}
|
||||||
|
className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:ring-2 focus:ring-green-400 focus:border-transparent transition duration-200 ease-in-out bg-white/80"
|
||||||
|
placeholder="Enter water content"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
htmlFor="waterContent"
|
||||||
|
className="block text-sm font-semibold text-gray-700 mb-2"
|
||||||
|
>
|
||||||
|
Size of Land
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="waterContent"
|
||||||
|
value={sizeContent}
|
||||||
|
onChange={(e) => setSizeContent(e.target.value)}
|
||||||
|
className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:ring-2 focus:ring-green-400 focus:border-transparent transition duration-200 ease-in-out bg-white/80"
|
||||||
|
placeholder="Enter water content"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
htmlFor="soilType"
|
||||||
|
className="block text-sm font-semibold text-gray-700 mb-2"
|
||||||
|
>
|
||||||
|
Soil Type
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="soilType"
|
||||||
|
value={soilType}
|
||||||
|
onChange={(e) => setSoilType(e.target.value)}
|
||||||
|
className="w-full px-4 py-3 rounded-lg border border-gray-200 focus:ring-2 focus:ring-green-400 focus:border-transparent transition duration-200 ease-in-out bg-white/80"
|
||||||
|
placeholder="Enter soil type"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="w-full bg-green-600 hover:bg-green-700 text-white font-semibold py-3 px-6 rounded-lg transition duration-200 ease-in-out transform hover:scale-[1.02] focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2"
|
||||||
|
>
|
||||||
|
Add Farm
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<p className="mt-4 text-red-500 text-sm bg-red-50 p-3 rounded-lg">
|
||||||
|
{error}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
{success && (
|
||||||
|
<p className="mt-4 text-green-500 text-sm bg-green-50 p-3 rounded-lg">
|
||||||
|
Farm added successfully!
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AddFarm;
|
||||||
@@ -0,0 +1,152 @@
|
|||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
|
||||||
|
const CropTable = ({ farmId }) => {
|
||||||
|
const [crops, setCrops] = useState([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState(null);
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchCrops = async () => {
|
||||||
|
try {
|
||||||
|
const response = await fetch(
|
||||||
|
`http://localhost:8000/api/v1/crop/farm/${farmId}`,
|
||||||
|
{
|
||||||
|
credentials: "include",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error("Failed to fetch crops");
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
setCrops(data || []);
|
||||||
|
} catch (err) {
|
||||||
|
setError(err.message);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchCrops();
|
||||||
|
}, [farmId]);
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="flex justify-center items-center min-h-[400px]">
|
||||||
|
Loading crops...
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<div className="bg-red-50 border border-red-200 rounded-lg p-4 mt-4">
|
||||||
|
<p className="text-red-600">Error: {error}</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (crops.length === 0) {
|
||||||
|
return (
|
||||||
|
<div className="text-center py-8 bg-gray-50 rounded-lg">
|
||||||
|
<h2 className="text-xl font-semibold text-gray-600">No crops found</h2>
|
||||||
|
<p className="text-gray-500 mt-2">
|
||||||
|
Start by adding some crops to your farm
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="overflow-hidden rounded-lg border border-gray-200 bg-white shadow">
|
||||||
|
<div className="px-4 py-5 sm:px-6">
|
||||||
|
<h1 className="text-2xl font-semibold text-gray-900">Crops Table</h1>
|
||||||
|
</div>
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="min-w-full divide-y divide-gray-200">
|
||||||
|
<thead className="bg-gray-50">
|
||||||
|
<tr>
|
||||||
|
<th className="px-6 py-3 text-left text-sm font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
Image
|
||||||
|
</th>
|
||||||
|
<th className="px-6 py-3 text-left text-sm font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
Name
|
||||||
|
</th>
|
||||||
|
<th className="px-6 py-3 text-left text-sm font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
Growth Stage
|
||||||
|
</th>
|
||||||
|
<th className="px-6 py-3 text-left text-sm font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
Health Status
|
||||||
|
</th>
|
||||||
|
<th className="px-6 py-3 text-left text-sm font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
Harvest Date
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="bg-white divide-y divide-gray-200">
|
||||||
|
{crops.map((crop) => (
|
||||||
|
<tr key={crop._id} className="hover:bg-gray-50">
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap">
|
||||||
|
<div className="h-12 w-12 rounded-full overflow-hidden">
|
||||||
|
{crop.image ? (
|
||||||
|
<img
|
||||||
|
src={crop.image}
|
||||||
|
alt={crop.name}
|
||||||
|
className="h-full w-full object-cover"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="h-full w-full bg-gray-200 flex items-center justify-center">
|
||||||
|
<span className="text-gray-500 text-xs">No image</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap">
|
||||||
|
<div className="text-sm font-medium text-gray-900">
|
||||||
|
{crop.name}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap">
|
||||||
|
<span
|
||||||
|
className="inline-flex px-2 py-1 text-sm font-medium rounded-full"
|
||||||
|
style={{
|
||||||
|
backgroundColor:
|
||||||
|
crop.growthStage === "Planted"
|
||||||
|
? "rgb(220, 252, 231)"
|
||||||
|
: crop.growthStage === "Growing"
|
||||||
|
? "rgb(254, 249, 195)"
|
||||||
|
: "rgb(224, 242, 254)",
|
||||||
|
color:
|
||||||
|
crop.growthStage === "Planted"
|
||||||
|
? "rgb(22, 101, 52)"
|
||||||
|
: crop.growthStage === "Growing"
|
||||||
|
? "rgb(113, 63, 18)"
|
||||||
|
: "rgb(3, 105, 161)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{crop.growthStage}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap">
|
||||||
|
<div className="text-sm text-gray-900">
|
||||||
|
{crop.healthStatus}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4 whitespace-nowrap">
|
||||||
|
<div className="text-sm text-gray-900">
|
||||||
|
{new Date(crop.harvestDate).toLocaleDateString()}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CropTable;
|
||||||
@@ -0,0 +1,243 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
|
||||||
|
const AddCrop = ({ farmId }) => {
|
||||||
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||||
|
const [name, setName] = useState("");
|
||||||
|
const [farm, setFarm] = useState(farmId);
|
||||||
|
const [harvestDate, setHarvestDate] = useState("");
|
||||||
|
const [growthStage, setGrowthStage] = useState("Planted");
|
||||||
|
const [healthStatus, setHealthStatus] = useState("");
|
||||||
|
const [image, setImage] = useState(null);
|
||||||
|
const [uploading, setUploading] = useState(false);
|
||||||
|
const [error, setError] = useState("");
|
||||||
|
const [success, setSuccess] = useState("");
|
||||||
|
|
||||||
|
const handleSubmit = async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setUploading(true);
|
||||||
|
setError("");
|
||||||
|
setSuccess("");
|
||||||
|
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append("name", name);
|
||||||
|
formData.append("farm", farm);
|
||||||
|
formData.append("harvestDate", harvestDate);
|
||||||
|
formData.append("growthStage", growthStage);
|
||||||
|
formData.append("healthStatus", healthStatus);
|
||||||
|
if (image) {
|
||||||
|
formData.append("image", image);
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(`http://localhost:8000/api/v1/crop`, {
|
||||||
|
method: "POST",
|
||||||
|
credentials: "include",
|
||||||
|
body: formData,
|
||||||
|
});
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error("Failed to create crop");
|
||||||
|
}
|
||||||
|
setSuccess("Crop created successfully!");
|
||||||
|
setName("");
|
||||||
|
setFarm("");
|
||||||
|
setHarvestDate("");
|
||||||
|
setGrowthStage("");
|
||||||
|
setHealthStatus("");
|
||||||
|
setImage(null);
|
||||||
|
} catch (err) {
|
||||||
|
setError(err.message);
|
||||||
|
} finally {
|
||||||
|
setUploading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<button
|
||||||
|
onClick={() => setIsModalOpen(true)}
|
||||||
|
className="block text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
Add New Crop
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{isModalOpen && (
|
||||||
|
<div className="fixed inset-0 z-50 flex items-center justify-center overflow-y-auto overflow-x-hidden">
|
||||||
|
<div
|
||||||
|
className="fixed inset-0 bg-black bg-opacity-50 transition-opacity"
|
||||||
|
onClick={() => setIsModalOpen(false)}
|
||||||
|
></div>
|
||||||
|
<div className="relative w-full max-w-3xl mx-4">
|
||||||
|
<div className="relative bg-white rounded-xl shadow-lg">
|
||||||
|
{/* Decorative SVG Elements - Moved further right */}
|
||||||
|
<div className="z-0 absolute right-0 top-0 h-full w-32 overflow-hidden pointer-events-none">
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 200 800"
|
||||||
|
className="absolute right-0 h-full transform translate-x-16 fill-green-100"
|
||||||
|
>
|
||||||
|
<path d="M0,0 Q100,200 0,400 Q100,600 0,800 L200,800 L200,0 Z" />
|
||||||
|
</svg>
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 200 800"
|
||||||
|
className="absolute right-0 h-full transform translate-x-8 fill-green-200/40"
|
||||||
|
>
|
||||||
|
<path d="M0,0 Q80,200 0,400 Q80,600 0,800 L200,800 L200,0 Z" />
|
||||||
|
</svg>
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 100 100"
|
||||||
|
className="absolute right-12 top-20 w-16 h-16 fill-green-300/30"
|
||||||
|
>
|
||||||
|
<path d="M50,0 Q100,50 50,100 Q0,50 50,0 Z" />
|
||||||
|
</svg>
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 100 100"
|
||||||
|
className="absolute right-16 top-48 w-12 h-12 fill-green-400/20"
|
||||||
|
>
|
||||||
|
<path d="M50,0 Q100,50 50,100 Q0,50 50,0 Z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Modal Header */}
|
||||||
|
<div className="flex items-center justify-between p-6 border-b rounded-t border-gray-200">
|
||||||
|
<h3 className="text-2xl font-semibold text-gray-800">
|
||||||
|
Add New Crop
|
||||||
|
</h3>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setIsModalOpen(false)}
|
||||||
|
className="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm z-100 w-8 h-8 inline-flex justify-center items-center"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className="w-3 h-3"
|
||||||
|
aria-hidden="true"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 14 14"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth="2"
|
||||||
|
d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span className="sr-only">Close modal</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Modal Body */}
|
||||||
|
<div className="p-6">
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-6 max-w-2xl">
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
htmlFor="name"
|
||||||
|
className="block text-sm font-medium text-gray-700 mb-2"
|
||||||
|
>
|
||||||
|
Crop Name
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="name"
|
||||||
|
value={name}
|
||||||
|
onChange={(e) => setName(e.target.value)}
|
||||||
|
placeholder="Rice"
|
||||||
|
className="block w-full px-4 py-3 rounded-lg border border-gray-300 shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
htmlFor="harvestDate"
|
||||||
|
className="block text-sm font-medium text-gray-700 mb-2"
|
||||||
|
>
|
||||||
|
Harvest Date
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="date"
|
||||||
|
id="harvestDate"
|
||||||
|
value={harvestDate}
|
||||||
|
onChange={(e) => setHarvestDate(e.target.value)}
|
||||||
|
className="block w-full px-4 py-3 rounded-lg border border-gray-300 shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
htmlFor="growthStage"
|
||||||
|
className="block text-sm font-medium text-gray-700 mb-2"
|
||||||
|
>
|
||||||
|
Growth Stage
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
id="growthStage"
|
||||||
|
value={growthStage}
|
||||||
|
onChange={(e) => setGrowthStage(e.target.value)}
|
||||||
|
className="block w-full px-4 py-3 rounded-lg border border-gray-300 shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<option value="Planted">Planted</option>
|
||||||
|
<option value="Growing">Growing</option>
|
||||||
|
<option value="Ready to Harvest">Ready to Harvest</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
htmlFor="healthStatus"
|
||||||
|
className="block text-sm font-medium text-gray-700 mb-2"
|
||||||
|
>
|
||||||
|
Health Status
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="healthStatus"
|
||||||
|
value={healthStatus}
|
||||||
|
onChange={(e) => setHealthStatus(e.target.value)}
|
||||||
|
placeholder="Healthy"
|
||||||
|
className="block w-full px-4 py-3 rounded-lg border border-gray-300 shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
htmlFor="image"
|
||||||
|
className="block text-sm font-medium text-gray-700 mb-2"
|
||||||
|
>
|
||||||
|
Crop Image
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
id="image"
|
||||||
|
accept="image/*"
|
||||||
|
onChange={(e) => setImage(e.target.files[0])}
|
||||||
|
className="block w-full px-4 py-3 rounded-lg border border-gray-300 shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="pt-4">
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="w-full z-100 bg-green-600 text-white px-6 py-3 rounded-lg hover:bg-green-700 transition duration-200 font-medium"
|
||||||
|
>
|
||||||
|
{uploading ? "Uploading..." : "Create Crop"}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && <p className="text-red-600 mt-4">{error}</p>}
|
||||||
|
{success && <p className="text-green-600 mt-4">{success}</p>}
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AddCrop;
|
||||||
@@ -0,0 +1,67 @@
|
|||||||
|
import AddCrop from "./AddCrop";
|
||||||
|
|
||||||
|
const Farm = ({ farmData, farmId }) => {
|
||||||
|
console.log("Farm id is : ", farmId);
|
||||||
|
return (
|
||||||
|
<div className="w-full ">
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<h1 className="text-2xl font-bold mb-4 m-3">{farmData.name}</h1>
|
||||||
|
<AddCrop farmId={farmId}></AddCrop>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<table className="min-w-full text-left">
|
||||||
|
<thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
|
||||||
|
<tr>
|
||||||
|
<th scope="col" className="px-6 py-3">
|
||||||
|
Farm Name
|
||||||
|
</th>
|
||||||
|
<th scope="col" className="px-6 py-3">
|
||||||
|
Location
|
||||||
|
</th>
|
||||||
|
<th scope="col" className="px-6 py-3">
|
||||||
|
Type
|
||||||
|
</th>
|
||||||
|
<th scope="col" className="px-6 py-3">
|
||||||
|
Size (acres)
|
||||||
|
</th>
|
||||||
|
<th scope="col" className="px-6 py-3">
|
||||||
|
Water Content
|
||||||
|
</th>
|
||||||
|
<th scope="col" className="px-6 py-3">
|
||||||
|
Action
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr className="odd:bg-white even:bg-gray-50 dark:odd:bg-gray-900 dark:even:bg-gray-800 border-b dark:border-gray-700">
|
||||||
|
{/* Clicking on the name cell can navigate to a more detailed view if needed */}
|
||||||
|
<td
|
||||||
|
className="px-6 py-4 cursor-pointer hover:text-blue-600 transition"
|
||||||
|
onClick={() => {
|
||||||
|
// Navigate to a detailed view for this farm if desired
|
||||||
|
navigate(`farmpage/${farmData._id}`);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{farmData.name}
|
||||||
|
</td>
|
||||||
|
<td className="px-6 py-4">{farmData.location}</td>
|
||||||
|
<td className="px-6 py-4">{farmData.soilType}</td>
|
||||||
|
<td className="px-6 py-4">{farmData.size}</td>
|
||||||
|
<td className="px-6 py-4">{farmData.waterContent}</td>
|
||||||
|
<td className="px-6 py-4">
|
||||||
|
<button
|
||||||
|
onClick={() =>
|
||||||
|
navigate(`/user/dashboard/updatefarm?farmId=${farmData._id}`)
|
||||||
|
}
|
||||||
|
className="font-medium text-blue-600 dark:text-blue-500 hover:underline"
|
||||||
|
>
|
||||||
|
Edit
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default Farm;
|
||||||
@@ -0,0 +1,67 @@
|
|||||||
|
import React, { useEffect, useState } from "react";
|
||||||
|
import { useParams, useNavigate } from "react-router-dom";
|
||||||
|
import Farm from "./Farm";
|
||||||
|
import CropTable from "./CropTable";
|
||||||
|
|
||||||
|
export default function FarmPage() {
|
||||||
|
const { farmId } = useParams();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const [farmData, setFarmData] = useState(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
async function fetching() {
|
||||||
|
try {
|
||||||
|
const response = await fetch(
|
||||||
|
`http://localhost:8000/api/v1/farm/${farmId}`,
|
||||||
|
{
|
||||||
|
method: "GET",
|
||||||
|
credentials: "include",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
const jsonData = await response.json();
|
||||||
|
console.log(jsonData);
|
||||||
|
setFarmData(jsonData);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching farm data: ", error);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
fetching();
|
||||||
|
}, [farmId]);
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="w-full bg-white rounded-lg shadow p-4">
|
||||||
|
<p>Loading farm data...</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!farmData) {
|
||||||
|
return (
|
||||||
|
<div className="w-full bg-white rounded-lg shadow p-4">
|
||||||
|
<p>No farm data found.</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log("My farm id is : ", farmId);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full bg-white rounded-lg shadow p-4">
|
||||||
|
{/* Back Button */}
|
||||||
|
|
||||||
|
<div className="mb-4 flex justify-end">
|
||||||
|
<Farm farmData={farmData} farmId={farmId}></Farm>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<CropTable farmId={farmId}></CropTable>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,155 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
|
||||||
|
const UpdateFarm = () => {
|
||||||
|
const [farmName, setFarmName] = useState("");
|
||||||
|
const [location, setLocation] = useState("");
|
||||||
|
const [waterContent, setWaterContent] = useState("");
|
||||||
|
const [soilType, setSoilType] = useState("");
|
||||||
|
const [sizeContent, setSizeContent] = useState("");
|
||||||
|
const [error, setError] = useState(null);
|
||||||
|
const [success, setSuccess] = useState(false);
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const handleSubmit = async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const farmData = {
|
||||||
|
name: farmName,
|
||||||
|
location,
|
||||||
|
waterContent,
|
||||||
|
soilType,
|
||||||
|
size: sizeContent,
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(
|
||||||
|
"http://localhost:8000/api/v1/farm/67b9b3a1b68365aa35ae0e5f",
|
||||||
|
{
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
body: JSON.stringify(farmData),
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error("Failed to Update the farm");
|
||||||
|
}
|
||||||
|
|
||||||
|
setSuccess(true);
|
||||||
|
setError(null);
|
||||||
|
// navigate to the dashboard:
|
||||||
|
navigate("/dashboard");
|
||||||
|
} catch (err) {
|
||||||
|
setError(err.message);
|
||||||
|
setSuccess(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full bg-white rounded-lg shadow p-4">
|
||||||
|
<h1 className="w-full text-center text-2xl font-bold my-5">
|
||||||
|
Update farm
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<div className="mb-4 flex justify-end space-x-4">
|
||||||
|
<form className="max-w-md mx-auto w-80" onSubmit={handleSubmit}>
|
||||||
|
<div className="mb-5">
|
||||||
|
<label
|
||||||
|
htmlFor="farmName"
|
||||||
|
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>
|
||||||
|
Farm Name
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="farmName"
|
||||||
|
value={farmName}
|
||||||
|
onChange={(e) => setFarmName(e.target.value)}
|
||||||
|
className="shadow-xs bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="mb-5">
|
||||||
|
<label
|
||||||
|
htmlFor="location"
|
||||||
|
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>
|
||||||
|
Location
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="location"
|
||||||
|
value={location}
|
||||||
|
onChange={(e) => setLocation(e.target.value)}
|
||||||
|
className="shadow-xs bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="mb-5">
|
||||||
|
<label
|
||||||
|
htmlFor="waterContent"
|
||||||
|
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>
|
||||||
|
Water Content
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="waterContent"
|
||||||
|
value={waterContent}
|
||||||
|
onChange={(e) => setWaterContent(e.target.value)}
|
||||||
|
className="shadow-xs bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="mb-5">
|
||||||
|
<label
|
||||||
|
htmlFor="soilType"
|
||||||
|
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>
|
||||||
|
Soil Type
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="soilType"
|
||||||
|
value={soilType}
|
||||||
|
onChange={(e) => setSoilType(e.target.value)}
|
||||||
|
className="shadow-xs bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="mb-5">
|
||||||
|
<label
|
||||||
|
htmlFor="soilType"
|
||||||
|
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
|
||||||
|
>
|
||||||
|
Size of Land
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="soilType"
|
||||||
|
value={sizeContent}
|
||||||
|
onChange={(e) => setSizeContent(e.target.value)}
|
||||||
|
className="shadow-xs bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
|
||||||
|
>
|
||||||
|
Add Farm
|
||||||
|
</button>
|
||||||
|
{error && <p className="mt-4 text-red-500 text-sm">{error}</p>}
|
||||||
|
{success && (
|
||||||
|
<p className="mt-4 text-green-500 text-sm">
|
||||||
|
Farm Updated successfully!
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default UpdateFarm;
|
||||||
@@ -27,7 +27,7 @@ const MainUserPanel = () => {
|
|||||||
|
|
||||||
//console.log("User Logged out data is : ", data);
|
//console.log("User Logged out data is : ", data);
|
||||||
|
|
||||||
if (data.success == true) {
|
if (data.success === true) {
|
||||||
navigate("/user/login");
|
navigate("/user/login");
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@@ -35,7 +35,7 @@ const MainUserPanel = () => {
|
|||||||
const user = useSelector((store) => store.user);
|
const user = useSelector((store) => store.user);
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="container mx-auto p-4 ">
|
<div className="container mx-auto p-4">
|
||||||
<div className="flex items-center mb-4 md:hidden">
|
<div className="flex items-center mb-4 md:hidden">
|
||||||
<img
|
<img
|
||||||
src={`${user.avatar}`}
|
src={`${user.avatar}`}
|
||||||
@@ -45,86 +45,92 @@ const MainUserPanel = () => {
|
|||||||
<span className="text-lg font-medium">Hello, {user.name}</span>
|
<span className="text-lg font-medium">Hello, {user.name}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-row gap-4">
|
<div className="flex flex-row gap-4">
|
||||||
<div className="w-1.5/12 md:w-3/12 bg-white rounded-lg shadow p-4">
|
{/* Updated Sidebar */}
|
||||||
<div className="hidden md:flex items-center mb-4">
|
<div className="w-full md:w-1/4 bg-gradient-to-br from-white to-gray-50 rounded-xl shadow-lg p-6">
|
||||||
|
<div className="hidden md:flex items-center mb-6">
|
||||||
<img
|
<img
|
||||||
src={`${user.avatar}`}
|
src={`${user.avatar}`}
|
||||||
alt="Profile Picture"
|
alt="Profile Picture"
|
||||||
className="rounded-full w-10 h-10 mr-2"
|
className="w-12 h-12 rounded-full mr-3 border-2 border-green-500"
|
||||||
/>
|
/>
|
||||||
<span className="text-lg font-medium">Hello, {user.name}</span>
|
<span className="text-xl font-semibold text-gray-800">
|
||||||
|
Hello, {user.name}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<ul className="list-none">
|
<ul className="space-y-4">
|
||||||
<li className="py-2 border-b border-gray-200">
|
<li>
|
||||||
<Link to={"/user/dashboard"} className="flex items-center">
|
<Link
|
||||||
<IoIosHome className="text-xl font-bold text-gray-700" />
|
to={"/user/dashboard"}
|
||||||
<span className="ml-2 text-sm font-semibold text-gray-500 hidden md:block">
|
className="flex items-center p-2 rounded-md hover:bg-green-100 transition-colors"
|
||||||
|
>
|
||||||
|
<IoIosHome className="text-2xl text-green-600" />
|
||||||
|
<span className="ml-3 text-lg font-medium text-gray-700 hidden md:block">
|
||||||
Dashboard
|
Dashboard
|
||||||
</span>
|
</span>
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
<li className="py-2 border-b border-gray-200">
|
<li>
|
||||||
<Link
|
<Link
|
||||||
to={"/user/dashboard/scheduledmeetings"}
|
to={"/user/dashboard/scheduledmeetings"}
|
||||||
className="flex items-center"
|
className="flex items-center p-2 rounded-md hover:bg-green-100 transition-colors"
|
||||||
>
|
>
|
||||||
<RiCalendarScheduleLine className="text-xl text-gray-700" />
|
<RiCalendarScheduleLine className="text-2xl text-green-600" />
|
||||||
<span className="ml-2 text-sm font-semibold text-gray-500 hidden md:block">
|
<span className="ml-3 text-lg font-medium text-gray-700 hidden md:block">
|
||||||
Scheduled Meeting
|
Scheduled Meeting
|
||||||
</span>
|
</span>
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
<li className="py-2 border-b border-gray-200">
|
<li>
|
||||||
<Link
|
<Link
|
||||||
to={"/user/dashboard/history"}
|
to={"/user/dashboard/history"}
|
||||||
className="flex items-center"
|
className="flex items-center p-2 rounded-md hover:bg-green-100 transition-colors"
|
||||||
>
|
>
|
||||||
<MdHistory className="text-xl text-gray-700" />
|
<MdHistory className="text-2xl text-green-600" />
|
||||||
<span className="ml-2 text-sm font-semibold text-gray-500 hidden md:block">
|
<span className="ml-3 text-lg font-medium text-gray-700 hidden md:block">
|
||||||
History
|
History
|
||||||
</span>
|
</span>
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
<li className="py-2 border-b border-gray-200">
|
<li>
|
||||||
<Link
|
<Link
|
||||||
to={"/user/dashboard/notifications"}
|
to={"/user/dashboard/notifications"}
|
||||||
className="flex items-center"
|
className="flex items-center p-2 rounded-md hover:bg-green-100 transition-colors"
|
||||||
>
|
>
|
||||||
<IoIosNotifications className="text-xl text-gray-700" />
|
<IoIosNotifications className="text-2xl text-green-600" />
|
||||||
<span className="ml-2 text-sm font-semibold text-gray-500 hidden md:block">
|
<span className="ml-3 text-lg font-medium text-gray-700 hidden md:block">
|
||||||
Notifications
|
Notifications
|
||||||
</span>
|
</span>
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
<li className="py-2 border-b border-gray-200">
|
<li>
|
||||||
<Link
|
<Link
|
||||||
to={"/user/dashboard/feedback"}
|
to={"/user/dashboard/feedback"}
|
||||||
className="flex items-center"
|
className="flex items-center p-2 rounded-md hover:bg-green-100 transition-colors"
|
||||||
>
|
>
|
||||||
<MdFeedback className="text-xl text-gray-700" />
|
<MdFeedback className="text-2xl text-green-600" />
|
||||||
<span className="ml-2 text-sm font-semibold text-gray-500 hidden md:block">
|
<span className="ml-3 text-lg font-medium text-gray-700 hidden md:block">
|
||||||
Feedback and Ratings
|
Feedback and Ratings
|
||||||
</span>
|
</span>
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
<li className="py-2 border-b border-gray-200">
|
<li>
|
||||||
<Link
|
<Link
|
||||||
to={"/user/dashboard/support"}
|
to={"/user/dashboard/support"}
|
||||||
className="flex items-center"
|
className="flex items-center p-2 rounded-md hover:bg-green-100 transition-colors"
|
||||||
>
|
>
|
||||||
<MdOutlineSupportAgent className="text-xl text-gray-700" />
|
<MdOutlineSupportAgent className="text-2xl text-green-600" />
|
||||||
<span className="ml-2 text-sm font-semibold text-gray-500 hidden md:block">
|
<span className="ml-3 text-lg font-medium text-gray-700 hidden md:block">
|
||||||
Support
|
Support
|
||||||
</span>
|
</span>
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
<li className="py-2 border-b border-gray-200">
|
<li>
|
||||||
<Link
|
<Link
|
||||||
to={"/user/dashboard/settings"}
|
to={"/user/dashboard/settings"}
|
||||||
className="flex items-center"
|
className="flex items-center p-2 rounded-md hover:bg-green-100 transition-colors"
|
||||||
>
|
>
|
||||||
<IoSettings className="text-xl text-gray-700" />
|
<IoSettings className="text-2xl text-green-600" />
|
||||||
<span className="ml-2 text-sm font-semibold text-gray-500 hidden md:block">
|
<span className="ml-3 text-lg font-medium text-gray-700 hidden md:block">
|
||||||
Settings
|
Settings
|
||||||
</span>
|
</span>
|
||||||
</Link>
|
</Link>
|
||||||
@@ -147,7 +153,7 @@ const MainUserPanel = () => {
|
|||||||
<span className="sr-only">Open user menu</span>
|
<span className="sr-only">Open user menu</span>
|
||||||
<BsThreeDotsVertical className="text-lg" />
|
<BsThreeDotsVertical className="text-lg" />
|
||||||
</button>
|
</button>
|
||||||
{/* <!-- Dropdown menu --> */}
|
{/* Dropdown menu */}
|
||||||
<div
|
<div
|
||||||
className="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600"
|
className="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 dark:divide-gray-600"
|
||||||
id="user-dropdown"
|
id="user-dropdown"
|
||||||
@@ -156,7 +162,7 @@ const MainUserPanel = () => {
|
|||||||
<span className="block text-sm text-gray-900 dark:text-white">
|
<span className="block text-sm text-gray-900 dark:text-white">
|
||||||
Bonnie Green
|
Bonnie Green
|
||||||
</span>
|
</span>
|
||||||
<span className="block text-sm text-gray-500 truncate dark:text-gray-400">
|
<span className="block text-sm text-gray-500 truncate dark:text-gray-400">
|
||||||
name@flowbite.com
|
name@flowbite.com
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -198,7 +204,7 @@ const MainUserPanel = () => {
|
|||||||
<button
|
<button
|
||||||
data-collapse-toggle="navbar-user"
|
data-collapse-toggle="navbar-user"
|
||||||
type="button"
|
type="button"
|
||||||
class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
|
className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
|
||||||
aria-controls="navbar-user"
|
aria-controls="navbar-user"
|
||||||
aria-expanded="false"
|
aria-expanded="false"
|
||||||
>
|
>
|
||||||
@@ -221,30 +227,29 @@ const MainUserPanel = () => {
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-4">
|
<div className="mb-4">
|
||||||
<img
|
<img
|
||||||
src={`${user.avatar}`}
|
src={`${user.avatar}`}
|
||||||
alt="Profile Picture"
|
alt="Profile Picture"
|
||||||
class="rounded-full w-24 h-24 mx-auto"
|
className="rounded-full w-24 h-24 mx-auto"
|
||||||
/>
|
/>
|
||||||
<h4 class="text-lg font-medium mt-2">{user.name}</h4>
|
<h4 className="text-lg font-medium mt-2">{user.name}</h4>
|
||||||
{/* <span class="text-gray-500 text-sm">@thomasdox</span> */}
|
<p className="text-gray-500 text-sm mt-2">
|
||||||
<p class="text-gray-500 text-sm mt-2">
|
|
||||||
Join on {user.createdAt && user.createdAt.substring(0, 10)}
|
Join on {user.createdAt && user.createdAt.substring(0, 10)}
|
||||||
</p>
|
</p>
|
||||||
<p class="text-gray-500 text-sm mt-2">
|
<p className="text-gray-500 text-sm mt-2">
|
||||||
{user.description == null &&
|
{user.description == null &&
|
||||||
"I am a Senior Software Engineer at Google and also mentored 50+ students to get there dream job."}
|
"I am a Senior Software Engineer at Google and also mentored 50+ students to get their dream job."}
|
||||||
</p>
|
</p>
|
||||||
<div class="flex justify-center mt-4">
|
<div className="flex justify-center mt-4">
|
||||||
<button class="bg-gray-300 hover:bg-gray-400 text-gray-700 font-bold py-2 px-4 rounded mr-2">
|
<button className="bg-gray-300 hover:bg-gray-400 text-gray-700 font-bold py-2 px-4 rounded mr-2">
|
||||||
<FaHome className="text-lg font-extrabold" />
|
<FaHome className="text-lg font-extrabold" />
|
||||||
</button>
|
</button>
|
||||||
<button class="bg-gray-300 hover:bg-gray-400 text-gray-700 font-bold py-2 px-4 rounded mr-2">
|
<button className="bg-gray-300 hover:bg-gray-400 text-gray-700 font-bold py-2 px-4 rounded mr-2">
|
||||||
<IoMdSettings className="text-lg font-extrabold" />
|
<IoMdSettings className="text-lg font-extrabold" />
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="bg-gray-300 hover:bg-gray-400 text-gray-700 font-bold py-2 px-4 rounded"
|
className="bg-gray-300 hover:bg-gray-400 text-gray-700 font-bold py-2 px-4 rounded"
|
||||||
onClick={handleLogOut}
|
onClick={handleLogOut}
|
||||||
>
|
>
|
||||||
<RiLogoutBoxLine className="text-lg font-extrabold" />
|
<RiLogoutBoxLine className="text-lg font-extrabold" />
|
||||||
|
|||||||
@@ -55,45 +55,43 @@ const MentorSessionCard = ({ session }) => {
|
|||||||
const realTimeString = timeStringtoRealTime(schduledTime);
|
const realTimeString = timeStringtoRealTime(schduledTime);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<li className="flex flex-col gap-5 w-full h-auto max-h-28 px-3 py-1 rounded-md hover:bg-slate-100 border-b-2">
|
||||||
<li class="flex flex-col gap-5 w-full h-auto max-h-28 px-3 py-1 rounded-md hover:bg-slate-100 border-b-2">
|
<div className="flex items-center">
|
||||||
<div class="flex items-center">
|
<div className="flex-shrink-0">
|
||||||
<div class="flex-shrink-0">
|
<img
|
||||||
<img
|
className="w-8 h-8 rounded-full"
|
||||||
class="w-8 h-8 rounded-full"
|
src="/images/profile.jpeg"
|
||||||
src="/images/profile.jpeg"
|
alt="Neil image"
|
||||||
alt="Neil image"
|
/>
|
||||||
/>
|
</div>
|
||||||
</div>
|
<div className="flex-1 min-w-0 ms-4">
|
||||||
<div class="flex-1 min-w-0 ms-4">
|
<p className="text-sm font-medium text-gray-900 truncate dark:text-white">
|
||||||
<p class="text-sm font-medium text-gray-900 truncate dark:text-white">
|
{user.role === "user" ? mentorName : studentName}
|
||||||
{user.role === "user" ? mentorName : studentName}
|
</p>
|
||||||
</p>
|
<p className="text-sm text-gray-500 truncate dark:text-gray-400">
|
||||||
<p class="text-sm text-gray-500 truncate dark:text-gray-400">
|
{user.role === "user" ? mentorMail : studentMail}
|
||||||
{user.role === "user" ? mentorMail : studentMail}
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">
|
||||||
|
₹{amountPaid}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div>
|
||||||
|
<p className="text-gray-500">
|
||||||
|
{timeStringToDayName(schduledTime)},
|
||||||
|
{realTimeString.substring(21, 26) +
|
||||||
|
" " +
|
||||||
|
realTimeString.substring(30)}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">
|
|
||||||
₹{amountPaid}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-between">
|
<div className="flex items-center">
|
||||||
<div className="flex items-center">
|
<p className="text-gray-500">{realTimeString.substring(0, 18)}</p>
|
||||||
<div>
|
|
||||||
<p className="text-gray-500">
|
|
||||||
{timeStringToDayName(schduledTime)},
|
|
||||||
{realTimeString.substring(21, 26) +
|
|
||||||
" " +
|
|
||||||
realTimeString.substring(30)}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center">
|
|
||||||
<p className="text-gray-500">{realTimeString.substring(0, 18)}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</div>
|
||||||
</>
|
</li>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,47 @@
|
|||||||
|
// MonitoringPage.jsx
|
||||||
|
import React from "react";
|
||||||
|
import MetricsCard from "../../components/monitoring charts/MetricCard";
|
||||||
|
import PerformanceChart from "../../components/monitoring charts/PerformanceChart";
|
||||||
|
import AlertsPanel from "../../components/monitoring charts/AlertsPanel";
|
||||||
|
import ActivityFeed from "../../components/monitoring charts/ActivityField";
|
||||||
|
import Piechart from "../../components/monitoring charts/Piechart";
|
||||||
|
|
||||||
|
const MonitoringPage = () => {
|
||||||
|
return (
|
||||||
|
<div className="w-full bg-white rounded-lg shadow p-4">
|
||||||
|
<div className="p-6">
|
||||||
|
{/* Summary Metrics */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
|
||||||
|
<MetricsCard title="Active Farms" value="12" />
|
||||||
|
<MetricsCard title="Total Yield" value="3500 kg" />
|
||||||
|
<MetricsCard title="Alerts" value="3" />
|
||||||
|
<MetricsCard title="Uptime" value="99.9%" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Performance Trend Chart */}
|
||||||
|
<div className="mb-6 bg-white p-4 rounded-lg shadow">
|
||||||
|
<h2 className="text-lg font-semibold mb-2">Performance Trend</h2>
|
||||||
|
<PerformanceChart />
|
||||||
|
</div>
|
||||||
|
<div className="mb-6 bg-white p-4 rounded-lg shadow">
|
||||||
|
<h2 className="text-lg font-semibold mb-2">Performance Trend</h2>
|
||||||
|
<Piechart></Piechart>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Alerts and Activity Feed */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div className="bg-white p-4 rounded-lg shadow">
|
||||||
|
<h2 className="text-lg font-semibold mb-2">Alerts</h2>
|
||||||
|
<AlertsPanel />
|
||||||
|
</div>
|
||||||
|
<div className="bg-white p-4 rounded-lg shadow">
|
||||||
|
<h2 className="text-lg font-semibold mb-2">Recent Activity</h2>
|
||||||
|
<ActivityFeed />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MonitoringPage;
|
||||||
@@ -95,15 +95,15 @@ const Settings = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<form onSubmit={handleAvatar}>
|
<form onSubmit={handleAvatar}>
|
||||||
<div class="flex items-center justify-center w-full">
|
<div className="flex items-center justify-center w-full">
|
||||||
<img src={formData.avatar && `${formData.avatar}`} alt="" />
|
<img src={formData.avatar && `${formData.avatar}`} alt="" />
|
||||||
<label
|
<label
|
||||||
for="dropzone-file"
|
htmlFor="dropzone-file"
|
||||||
class="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600"
|
className="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600"
|
||||||
>
|
>
|
||||||
<div class="flex flex-col items-center justify-center pt-5 pb-6 ">
|
<div className="flex flex-col items-center justify-center pt-5 pb-6">
|
||||||
<svg
|
<svg
|
||||||
class="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400"
|
className="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
fill="none"
|
fill="none"
|
||||||
@@ -111,24 +111,24 @@ const Settings = () => {
|
|||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
stroke-linecap="round"
|
strokeLinecap="round"
|
||||||
stroke-linejoin="round"
|
strokeLinejoin="round"
|
||||||
stroke-width="2"
|
strokeWidth="2"
|
||||||
d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"
|
d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
<p class="mb-2 text-sm text-gray-500 dark:text-gray-400">
|
<p className="mb-2 text-sm text-gray-500 dark:text-gray-400">
|
||||||
{avatar ? (
|
{avatar ? (
|
||||||
<span class="font-semibold">
|
<span className="font-semibold">
|
||||||
Avatar uploaded successfulky
|
Avatar uploaded successfully
|
||||||
</span>
|
</span>
|
||||||
) : (
|
) : (
|
||||||
<span class="font-semibold">
|
<span className="font-semibold">
|
||||||
Click to upload and press Upload button
|
Click to upload and press Upload button
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</p>
|
</p>
|
||||||
<p class="text-xs text-gray-500 dark:text-gray-400">
|
<p className="text-xs text-gray-500 dark:text-gray-400">
|
||||||
SVG, PNG, JPG or GIF (MAX. 800x400px)
|
SVG, PNG, JPG or GIF (MAX. 800x400px)
|
||||||
</p>
|
</p>
|
||||||
<button
|
<button
|
||||||
@@ -141,7 +141,7 @@ const Settings = () => {
|
|||||||
<input
|
<input
|
||||||
id="dropzone-file"
|
id="dropzone-file"
|
||||||
type="file"
|
type="file"
|
||||||
class="hidden"
|
className="hidden"
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
setAvatar(e.target.files[0]);
|
setAvatar(e.target.files[0]);
|
||||||
//console.log(e.target.files[0]);
|
//console.log(e.target.files[0]);
|
||||||
|
|||||||
@@ -1,9 +1,13 @@
|
|||||||
/** @type {import('tailwindcss').Config} */
|
/** @type {import('tailwindcss').Config} */
|
||||||
export default {
|
export default {
|
||||||
darkMode: 'selector',
|
darkMode: 'class', // Change this based on your needs
|
||||||
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
|
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
|
||||||
theme: {
|
theme: {
|
||||||
extend: {},
|
extend: {
|
||||||
|
backgroundImage: {
|
||||||
|
'plant': "url('/home/atharva/public/images/plant-1573.svg')",
|
||||||
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
plugins: [],
|
plugins: [],
|
||||||
};
|
};
|
||||||
|
|||||||
+119
@@ -0,0 +1,119 @@
|
|||||||
|
{
|
||||||
|
"name": "git repo",
|
||||||
|
"lockfileVersion": 3,
|
||||||
|
"requires": true,
|
||||||
|
"packages": {
|
||||||
|
"node_modules/@yr/monotone-cubic-spline": {
|
||||||
|
"version": "1.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz",
|
||||||
|
"integrity": "sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
|
"node_modules/apexcharts": {
|
||||||
|
"version": "3.46.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.46.0.tgz",
|
||||||
|
"integrity": "sha512-ELAY6vj8JQD7QLktKasTzwm9Wt0qxqfQSo+3QWS7G7I774iK8HCkG1toGsqJH0mkK6PtYBtnSIe66uUcwoCw1w==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@yr/monotone-cubic-spline": "^1.0.3",
|
||||||
|
"svg.draggable.js": "^2.2.2",
|
||||||
|
"svg.easing.js": "^2.0.0",
|
||||||
|
"svg.filter.js": "^2.0.2",
|
||||||
|
"svg.pathmorphing.js": "^0.1.3",
|
||||||
|
"svg.resize.js": "^1.4.3",
|
||||||
|
"svg.select.js": "^3.0.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/svg.draggable.js": {
|
||||||
|
"version": "2.2.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz",
|
||||||
|
"integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"svg.js": "^2.0.1"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.8.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/svg.easing.js": {
|
||||||
|
"version": "2.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz",
|
||||||
|
"integrity": "sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"svg.js": ">=2.3.x"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.8.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/svg.filter.js": {
|
||||||
|
"version": "2.0.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz",
|
||||||
|
"integrity": "sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"svg.js": "^2.2.5"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.8.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/svg.js": {
|
||||||
|
"version": "2.7.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz",
|
||||||
|
"integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
|
"node_modules/svg.pathmorphing.js": {
|
||||||
|
"version": "0.1.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz",
|
||||||
|
"integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"svg.js": "^2.4.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.8.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/svg.resize.js": {
|
||||||
|
"version": "1.4.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz",
|
||||||
|
"integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"svg.js": "^2.6.5",
|
||||||
|
"svg.select.js": "^2.1.2"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.8.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/svg.resize.js/node_modules/svg.select.js": {
|
||||||
|
"version": "2.1.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz",
|
||||||
|
"integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"svg.js": "^2.2.5"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.8.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/svg.select.js": {
|
||||||
|
"version": "3.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz",
|
||||||
|
"integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"svg.js": "^2.6.5"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">= 0.8.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+4
@@ -0,0 +1,4 @@
|
|||||||
|
.DS_Store
|
||||||
|
.git*
|
||||||
|
test
|
||||||
|
package-lock.json
|
||||||
+5
@@ -0,0 +1,5 @@
|
|||||||
|
language: node_js
|
||||||
|
node_js:
|
||||||
|
- "4"
|
||||||
|
- "6"
|
||||||
|
sudo: false
|
||||||
+20
@@ -0,0 +1,20 @@
|
|||||||
|
The MIT License (MIT)
|
||||||
|
|
||||||
|
Copyright (c) 2015 yr.no
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||||
|
this software and associated documentation files (the "Software"), to deal in
|
||||||
|
the Software without restriction, including without limitation the rights to
|
||||||
|
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
|
||||||
|
the Software, and to permit persons to whom the Software is furnished to do so,
|
||||||
|
subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
|
||||||
|
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
|
||||||
|
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
|
||||||
|
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
||||||
|
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||||
+23
@@ -0,0 +1,23 @@
|
|||||||
|
[](https://npmjs.org/package/@yr/monotone-cubic-spline)
|
||||||
|
[](https://travis-ci.org/YR/monotone-cubic-spline?branch=master)
|
||||||
|
|
||||||
|
Convert a series of points to a monotone cubic spline (based on D3.js implementation)
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
```js
|
||||||
|
const spline = require('@yr/monotone-cubic-spline');
|
||||||
|
const points = spline.points([[0,0], [1,1], [2,1], [3,0], [4,0]]);
|
||||||
|
const svgPath = spline.svgPath(points);
|
||||||
|
|
||||||
|
console.log(svgPath);
|
||||||
|
// => 'M0 0C0.08333333333333333, 0.08333333333333333, ...'
|
||||||
|
```
|
||||||
|
|
||||||
|
## API
|
||||||
|
|
||||||
|
**points(points)**: convert array of points (x,y) to array of bezier points (c1x,c1y,c2x,c2y,x,y)
|
||||||
|
|
||||||
|
**slice(points, start, end)**: slice a segment of converted points
|
||||||
|
|
||||||
|
**svgPath(points)**: convert array of bezier points to svg path (`d`) string
|
||||||
+166
@@ -0,0 +1,166 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Convert a series of points to a monotone cubic spline
|
||||||
|
* Algorithm based on https://github.com/mbostock/d3
|
||||||
|
* https://github.com/yr/monotone-cubic-spline
|
||||||
|
* @copyright Yr
|
||||||
|
* @license MIT
|
||||||
|
*/
|
||||||
|
|
||||||
|
var ε = 1e-6;
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
/**
|
||||||
|
* Convert 'points' to bezier
|
||||||
|
* @param {Array} points
|
||||||
|
* @returns {Array}
|
||||||
|
*/
|
||||||
|
points: function points(_points) {
|
||||||
|
var tgts = tangents(_points);
|
||||||
|
|
||||||
|
var p = _points[1];
|
||||||
|
var p0 = _points[0];
|
||||||
|
var pts = [];
|
||||||
|
var t = tgts[1];
|
||||||
|
var t0 = tgts[0];
|
||||||
|
|
||||||
|
// Add starting 'M' and 'C' points
|
||||||
|
pts.push(p0, [p0[0] + t0[0], p0[1] + t0[1], p[0] - t[0], p[1] - t[1], p[0], p[1]]);
|
||||||
|
|
||||||
|
// Add 'S' points
|
||||||
|
for (var i = 2, n = tgts.length; i < n; i++) {
|
||||||
|
var _p = _points[i];
|
||||||
|
var _t = tgts[i];
|
||||||
|
|
||||||
|
pts.push([_p[0] - _t[0], _p[1] - _t[1], _p[0], _p[1]]);
|
||||||
|
}
|
||||||
|
|
||||||
|
return pts;
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Slice out a segment of 'points'
|
||||||
|
* @param {Array} points
|
||||||
|
* @param {Number} start
|
||||||
|
* @param {Number} end
|
||||||
|
* @returns {Array}
|
||||||
|
*/
|
||||||
|
slice: function slice(points, start, end) {
|
||||||
|
var pts = points.slice(start, end);
|
||||||
|
|
||||||
|
if (start) {
|
||||||
|
// Add additional 'C' points
|
||||||
|
if (pts[1].length < 6) {
|
||||||
|
var n = pts[0].length;
|
||||||
|
|
||||||
|
pts[1] = [pts[0][n - 2] * 2 - pts[0][n - 4], pts[0][n - 1] * 2 - pts[0][n - 3]].concat(pts[1]);
|
||||||
|
}
|
||||||
|
// Remove control points for 'M'
|
||||||
|
pts[0] = pts[0].slice(-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
return pts;
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Convert 'points' to svg path
|
||||||
|
* @param {Array} points
|
||||||
|
* @returns {String}
|
||||||
|
*/
|
||||||
|
svgPath: function svgPath(points) {
|
||||||
|
var p = '';
|
||||||
|
|
||||||
|
for (var i = 0; i < points.length; i++) {
|
||||||
|
var point = points[i];
|
||||||
|
var n = point.length;
|
||||||
|
|
||||||
|
if (!i) {
|
||||||
|
p += 'M' + point[n - 2] + ' ' + point[n - 1];
|
||||||
|
} else if (n > 4) {
|
||||||
|
p += 'C' + point[0] + ', ' + point[1];
|
||||||
|
p += ', ' + point[2] + ', ' + point[3];
|
||||||
|
p += ', ' + point[4] + ', ' + point[5];
|
||||||
|
} else {
|
||||||
|
p += 'S' + point[0] + ', ' + point[1];
|
||||||
|
p += ', ' + point[2] + ', ' + point[3];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return p;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generate tangents for 'points'
|
||||||
|
* @param {Array} points
|
||||||
|
* @returns {Array}
|
||||||
|
*/
|
||||||
|
function tangents(points) {
|
||||||
|
var m = finiteDifferences(points);
|
||||||
|
var n = points.length - 1;
|
||||||
|
|
||||||
|
var tgts = [];
|
||||||
|
var a = void 0,
|
||||||
|
b = void 0,
|
||||||
|
d = void 0,
|
||||||
|
s = void 0;
|
||||||
|
|
||||||
|
for (var i = 0; i < n; i++) {
|
||||||
|
d = slope(points[i], points[i + 1]);
|
||||||
|
|
||||||
|
if (Math.abs(d) < ε) {
|
||||||
|
m[i] = m[i + 1] = 0;
|
||||||
|
} else {
|
||||||
|
a = m[i] / d;
|
||||||
|
b = m[i + 1] / d;
|
||||||
|
s = a * a + b * b;
|
||||||
|
if (s > 9) {
|
||||||
|
s = d * 3 / Math.sqrt(s);
|
||||||
|
m[i] = s * a;
|
||||||
|
m[i + 1] = s * b;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
for (var _i = 0; _i <= n; _i++) {
|
||||||
|
s = (points[Math.min(n, _i + 1)][0] - points[Math.max(0, _i - 1)][0]) / (6 * (1 + m[_i] * m[_i]));
|
||||||
|
tgts.push([s || 0, m[_i] * s || 0]);
|
||||||
|
}
|
||||||
|
|
||||||
|
return tgts;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Compute slope from point 'p0' to 'p1'
|
||||||
|
* @param {Array} p0
|
||||||
|
* @param {Array} p1
|
||||||
|
* @returns {Number}
|
||||||
|
*/
|
||||||
|
function slope(p0, p1) {
|
||||||
|
return (p1[1] - p0[1]) / (p1[0] - p0[0]);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Compute three-point differences for 'points'
|
||||||
|
* @param {Array} points
|
||||||
|
* @returns {Array}
|
||||||
|
*/
|
||||||
|
function finiteDifferences(points) {
|
||||||
|
var m = [];
|
||||||
|
var p0 = points[0];
|
||||||
|
var p1 = points[1];
|
||||||
|
var d = m[0] = slope(p0, p1);
|
||||||
|
var i = 1;
|
||||||
|
|
||||||
|
for (var n = points.length - 1; i < n; i++) {
|
||||||
|
p0 = p1;
|
||||||
|
p1 = points[i + 1];
|
||||||
|
m[i] = (d + (d = slope(p0, p1))) * 0.5;
|
||||||
|
}
|
||||||
|
m[i] = d;
|
||||||
|
|
||||||
|
return m;
|
||||||
|
}
|
||||||
+57
@@ -0,0 +1,57 @@
|
|||||||
|
{
|
||||||
|
"name": "@yr/monotone-cubic-spline",
|
||||||
|
"description": "Convert a series of points to a monotone cubic spline",
|
||||||
|
"version": "1.0.3",
|
||||||
|
"author": "Alexander Pope <alexander.pope@nrk.no>",
|
||||||
|
"dependencies": {},
|
||||||
|
"devDependencies": {
|
||||||
|
"babel-plugin-syntax-trailing-function-commas": "6.22.0",
|
||||||
|
"babel-plugin-transform-async-generator-functions": "6.24.1",
|
||||||
|
"babel-plugin-transform-async-to-generator": "6.24.1",
|
||||||
|
"babel-plugin-transform-es2015-arrow-functions": "6.22.0",
|
||||||
|
"babel-plugin-transform-es2015-block-scoped-functions": "6.22.0",
|
||||||
|
"babel-plugin-transform-es2015-block-scoping": "6.24.1",
|
||||||
|
"babel-plugin-transform-es2015-classes": "6.24.1",
|
||||||
|
"babel-plugin-transform-es2015-computed-properties": "6.24.1",
|
||||||
|
"babel-plugin-transform-es2015-destructuring": "6.23.0",
|
||||||
|
"babel-plugin-transform-es2015-duplicate-keys": "6.24.1",
|
||||||
|
"babel-plugin-transform-es2015-for-of": "6.23.0",
|
||||||
|
"babel-plugin-transform-es2015-function-name": "6.24.1",
|
||||||
|
"babel-plugin-transform-es2015-literals": "6.22.0",
|
||||||
|
"babel-plugin-transform-es2015-object-super": "6.24.1",
|
||||||
|
"babel-plugin-transform-es2015-parameters": "6.24.1",
|
||||||
|
"babel-plugin-transform-es2015-shorthand-properties": "6.24.1",
|
||||||
|
"babel-plugin-transform-es2015-spread": "6.22.0",
|
||||||
|
"babel-plugin-transform-es2015-sticky-regex": "6.24.1",
|
||||||
|
"babel-plugin-transform-es2015-template-literals": "6.22.0",
|
||||||
|
"babel-plugin-transform-es2015-unicode-regex": "6.24.1",
|
||||||
|
"babel-plugin-transform-es5-property-mutators": "6.24.1",
|
||||||
|
"babel-plugin-transform-exponentiation-operator": "6.24.1",
|
||||||
|
"babel-plugin-transform-object-rest-spread": "6.23.0",
|
||||||
|
"buddy": "6.x.x",
|
||||||
|
"expect.js": "*",
|
||||||
|
"mocha": "*"
|
||||||
|
},
|
||||||
|
"main": "src/index.js",
|
||||||
|
"repository": "https://github.com/YR/monotone-cubic-spline.git",
|
||||||
|
"license": "MIT",
|
||||||
|
"scripts": {
|
||||||
|
"prepublish": "buddy build",
|
||||||
|
"test": "NODE_ENV=test mocha test/lib-test.js --reporter spec"
|
||||||
|
},
|
||||||
|
"browser": "index.js",
|
||||||
|
"buddy": {
|
||||||
|
"build": [
|
||||||
|
{
|
||||||
|
"input": "src/",
|
||||||
|
"output": ".",
|
||||||
|
"bundle": false,
|
||||||
|
"version": "es5"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"input": "src/index.js",
|
||||||
|
"output": "test/lib.js"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
+161
@@ -0,0 +1,161 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Convert a series of points to a monotone cubic spline
|
||||||
|
* Algorithm based on https://github.com/mbostock/d3
|
||||||
|
* https://github.com/yr/monotone-cubic-spline
|
||||||
|
* @copyright Yr
|
||||||
|
* @license MIT
|
||||||
|
*/
|
||||||
|
|
||||||
|
const ε = 1e-6;
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
/**
|
||||||
|
* Convert 'points' to bezier
|
||||||
|
* @param {Array} points
|
||||||
|
* @returns {Array}
|
||||||
|
*/
|
||||||
|
points(points) {
|
||||||
|
const tgts = tangents(points);
|
||||||
|
|
||||||
|
const p = points[1];
|
||||||
|
const p0 = points[0];
|
||||||
|
const pts = [];
|
||||||
|
const t = tgts[1];
|
||||||
|
const t0 = tgts[0];
|
||||||
|
|
||||||
|
// Add starting 'M' and 'C' points
|
||||||
|
pts.push(p0, [p0[0] + t0[0], p0[1] + t0[1], p[0] - t[0], p[1] - t[1], p[0], p[1]]);
|
||||||
|
|
||||||
|
// Add 'S' points
|
||||||
|
for (let i = 2, n = tgts.length; i < n; i++) {
|
||||||
|
const p = points[i];
|
||||||
|
const t = tgts[i];
|
||||||
|
|
||||||
|
pts.push([p[0] - t[0], p[1] - t[1], p[0], p[1]]);
|
||||||
|
}
|
||||||
|
|
||||||
|
return pts;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Slice out a segment of 'points'
|
||||||
|
* @param {Array} points
|
||||||
|
* @param {Number} start
|
||||||
|
* @param {Number} end
|
||||||
|
* @returns {Array}
|
||||||
|
*/
|
||||||
|
slice(points, start, end) {
|
||||||
|
const pts = points.slice(start, end);
|
||||||
|
|
||||||
|
if (start) {
|
||||||
|
// Add additional 'C' points
|
||||||
|
if (pts[1].length < 6) {
|
||||||
|
const n = pts[0].length;
|
||||||
|
|
||||||
|
pts[1] = [pts[0][n - 2] * 2 - pts[0][n - 4], pts[0][n - 1] * 2 - pts[0][n - 3]].concat(pts[1]);
|
||||||
|
}
|
||||||
|
// Remove control points for 'M'
|
||||||
|
pts[0] = pts[0].slice(-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
return pts;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Convert 'points' to svg path
|
||||||
|
* @param {Array} points
|
||||||
|
* @returns {String}
|
||||||
|
*/
|
||||||
|
svgPath(points) {
|
||||||
|
let p = '';
|
||||||
|
|
||||||
|
for (let i = 0; i < points.length; i++) {
|
||||||
|
const point = points[i];
|
||||||
|
const n = point.length;
|
||||||
|
|
||||||
|
if (!i) {
|
||||||
|
p += `M${point[n - 2]} ${point[n - 1]}`;
|
||||||
|
} else if (n > 4) {
|
||||||
|
p += `C${point[0]}, ${point[1]}`;
|
||||||
|
p += `, ${point[2]}, ${point[3]}`;
|
||||||
|
p += `, ${point[4]}, ${point[5]}`;
|
||||||
|
} else {
|
||||||
|
p += `S${point[0]}, ${point[1]}`;
|
||||||
|
p += `, ${point[2]}, ${point[3]}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return p;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generate tangents for 'points'
|
||||||
|
* @param {Array} points
|
||||||
|
* @returns {Array}
|
||||||
|
*/
|
||||||
|
function tangents(points) {
|
||||||
|
const m = finiteDifferences(points);
|
||||||
|
const n = points.length - 1;
|
||||||
|
|
||||||
|
const tgts = [];
|
||||||
|
let a, b, d, s;
|
||||||
|
|
||||||
|
for (let i = 0; i < n; i++) {
|
||||||
|
d = slope(points[i], points[i + 1]);
|
||||||
|
|
||||||
|
if (Math.abs(d) < ε) {
|
||||||
|
m[i] = m[i + 1] = 0;
|
||||||
|
} else {
|
||||||
|
a = m[i] / d;
|
||||||
|
b = m[i + 1] / d;
|
||||||
|
s = a * a + b * b;
|
||||||
|
if (s > 9) {
|
||||||
|
s = d * 3 / Math.sqrt(s);
|
||||||
|
m[i] = s * a;
|
||||||
|
m[i + 1] = s * b;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let i = 0; i <= n; i++) {
|
||||||
|
s = (points[Math.min(n, i + 1)][0] - points[Math.max(0, i - 1)][0]) / (6 * (1 + m[i] * m[i]));
|
||||||
|
tgts.push([s || 0, m[i] * s || 0]);
|
||||||
|
}
|
||||||
|
|
||||||
|
return tgts;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Compute slope from point 'p0' to 'p1'
|
||||||
|
* @param {Array} p0
|
||||||
|
* @param {Array} p1
|
||||||
|
* @returns {Number}
|
||||||
|
*/
|
||||||
|
function slope(p0, p1) {
|
||||||
|
return (p1[1] - p0[1]) / (p1[0] - p0[0]);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Compute three-point differences for 'points'
|
||||||
|
* @param {Array} points
|
||||||
|
* @returns {Array}
|
||||||
|
*/
|
||||||
|
function finiteDifferences(points) {
|
||||||
|
const m = [];
|
||||||
|
let p0 = points[0];
|
||||||
|
let p1 = points[1];
|
||||||
|
let d = (m[0] = slope(p0, p1));
|
||||||
|
let i = 1;
|
||||||
|
|
||||||
|
for (let n = points.length - 1; i < n; i++) {
|
||||||
|
p0 = p1;
|
||||||
|
p1 = points[i + 1];
|
||||||
|
m[i] = (d + (d = slope(p0, p1))) * 0.5;
|
||||||
|
}
|
||||||
|
m[i] = d;
|
||||||
|
|
||||||
|
return m;
|
||||||
|
}
|
||||||
+21
@@ -0,0 +1,21 @@
|
|||||||
|
The MIT License (MIT)
|
||||||
|
|
||||||
|
Copyright (c) 2018 ApexCharts
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in
|
||||||
|
all copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||||
|
THE SOFTWARE.
|
||||||
+230
@@ -0,0 +1,230 @@
|
|||||||
|
<p align="center"><img src="https://apexcharts.com/media/apexcharts-logo.png"></p>
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
<a href="https://github.com/apexcharts/apexcharts.js/blob/master/LICENSE"><img src="https://img.shields.io/badge/License-MIT-brightgreen.svg" alt="License"></a>
|
||||||
|
<a href="https://travis-ci.com/apexcharts/apexcharts.js"><img src="https://api.travis-ci.com/apexcharts/apexcharts.js.svg?branch=master" alt="build" /></a>
|
||||||
|
<img alt="downloads" src="https://img.shields.io/npm/dm/apexcharts.svg"/>
|
||||||
|
<a href="https://www.npmjs.com/package/apexcharts"><img src="https://img.shields.io/npm/v/apexcharts.svg" alt="ver"></a>
|
||||||
|
<img alt="size" src="https://badgen.net/bundlephobia/min/apexcharts?label=size">
|
||||||
|
<a href="https://cdn.jsdelivr.net/npm/apexcharts@3.12.0/types/apexcharts.d.ts"><img src="https://badgen.net/npm/types/apexcharts"/></a>
|
||||||
|
<a href="https://github.com/prettier/prettier"><img src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square" alt="prettier"></a>
|
||||||
|
<a href="https://www.jsdelivr.com/package/npm/apexcharts"><img src="https://data.jsdelivr.com/v1/package/npm/apexcharts/badge" alt="jsdelivr" /></a>
|
||||||
|
<a href="https://codeclimate.com/github/apexcharts/apexcharts.js"><img src="https://badgen.net/codeclimate/maintainability/apexcharts/apexcharts.js" /></a>
|
||||||
|
<img src="https://badgen.net/codeclimate/tech-debt/apexcharts/apexcharts.js"/>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
<a href="https://twitter.com/intent/tweet?text=Create%20visualizations%20with%20this%20free%20and%20open-source%20JavaScript%20Chart%20library&url=https://www.apexcharts.com&hashtags=javascript,charts,visualizations,developers,apexcharts"><img src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social"> </a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p align="center">A modern JavaScript charting library that allows you to build interactive data visualizations with simple API and 100+ ready-to-use samples. Packed with the features that you expect, ApexCharts includes over a dozen chart types that deliver beautiful, responsive visualizations in your apps and dashboards. ApexCharts is an MIT-licensed open-source project that can be used in commercial and non-commercial projects.</p>
|
||||||
|
|
||||||
|
<p align="center"><a href="https://apexcharts.com/javascript-chart-demos/"><img
|
||||||
|
src="https://apexcharts.com/media/apexcharts-banner.png"></a></p>
|
||||||
|
|
||||||
|
<br />
|
||||||
|
|
||||||
|
## Browsers support
|
||||||
|
|
||||||
|
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/> Edge | [<img src="https://user-images.githubusercontent.com/17712401/124668393-30772d00-de87-11eb-9360-3199c3b68b95.png" alt="IE" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/> IE11 |
|
||||||
|
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||||
|
| 31+ ✔ | 35+ ✔ | 6+ ✔ | Edge ✔ | [(IE11)](#using-it-with-ie11) ✔ |
|
||||||
|
|
||||||
|
## Download and Installation
|
||||||
|
|
||||||
|
##### Installing via npm
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install apexcharts --save
|
||||||
|
```
|
||||||
|
|
||||||
|
##### Direct <script> include
|
||||||
|
|
||||||
|
```html
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Wrappers for Vue/React/Angular/Stencil
|
||||||
|
|
||||||
|
Integrate easily with 3rd party frameworks
|
||||||
|
|
||||||
|
- [vue-apexcharts](https://github.com/apexcharts/vue-apexcharts)
|
||||||
|
- [react-apexcharts](https://github.com/apexcharts/react-apexcharts)
|
||||||
|
- [ng-apexcharts](https://github.com/apexcharts/ng-apexcharts) - Plugin by [Morris Janatzek](https://morrisj.net/)
|
||||||
|
- [stencil-apexcharts](https://github.com/apexcharts/stencil-apexcharts)
|
||||||
|
|
||||||
|
### Unofficial Wrappers
|
||||||
|
|
||||||
|
Useful links to wrappers other than the popular frameworks mentioned above
|
||||||
|
|
||||||
|
- [apexcharter](https://github.com/dreamRs/apexcharter) - Htmlwidget for ApexCharts
|
||||||
|
- [apexcharts.rb](https://github.com/styd/apexcharts.rb) - Ruby wrapper for ApexCharts
|
||||||
|
- [larapex-charts](https://github.com/ArielMejiaDev/larapex-charts) - Laravel wrapper for ApexCharts
|
||||||
|
- [blazor-apexcharts](https://github.com/apexcharts/Blazor-ApexCharts) - Blazor wrapper for ApexCharts [demo](https://apexcharts.github.io/Blazor-ApexCharts/)
|
||||||
|
- [svelte-apexcharts](https://github.com/galkatz373/svelte-apexcharts) - Svelte wrapper for ApexCharts
|
||||||
|
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
```js
|
||||||
|
import ApexCharts from 'apexcharts'
|
||||||
|
```
|
||||||
|
|
||||||
|
To create a basic bar chart with minimal configuration, write as follows:
|
||||||
|
|
||||||
|
```js
|
||||||
|
var options = {
|
||||||
|
chart: {
|
||||||
|
type: 'bar'
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'sales',
|
||||||
|
data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
xaxis: {
|
||||||
|
categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var chart = new ApexCharts(document.querySelector('#chart'), options)
|
||||||
|
chart.render()
|
||||||
|
```
|
||||||
|
|
||||||
|
This will render the following chart
|
||||||
|
|
||||||
|
<p align="center"><a href="https://apexcharts.com/javascript-chart-demos/column-charts/"><img src="https://apexcharts.com/media/first-bar-chart.svg"></a></p>
|
||||||
|
|
||||||
|
### A little more than the basic
|
||||||
|
|
||||||
|
You can create a combination of different charts, sync them and give your desired look with unlimited possibilities.
|
||||||
|
Below is an example of synchronized charts with github style.
|
||||||
|
|
||||||
|
<p align="center"><a href="https://apexcharts.com/javascript-chart-demos/area-charts/github-style/"><img src="https://apexcharts.com/media/github-charts.gif"></a></p>
|
||||||
|
|
||||||
|
## Interactivity
|
||||||
|
|
||||||
|
Zoom, Pan, and Scroll through data. Make selections and load other charts using those selections.
|
||||||
|
An example showing some interactivity
|
||||||
|
|
||||||
|
<p align="center"><a href="https://codepen.io/apexcharts/pen/QrbEQg" target="_blank"><img src="https://apexcharts.com/media/interactivity.gif" alt="interactive chart"></a></p>
|
||||||
|
|
||||||
|
## Dynamic Series Update
|
||||||
|
|
||||||
|
Another approach is to Drill down charts where one selection updates the data of other charts.
|
||||||
|
An example of loading dynamic series into charts is shown below
|
||||||
|
|
||||||
|
<p align="center"><a href="https://apexcharts.com/javascript-chart-demos/column-charts/dynamic-loaded-chart/"><img src="https://apexcharts.com/media/dynamic-selection.gif" alt="dynamic-loading-chart" /></a></p>
|
||||||
|
|
||||||
|
## Annotations
|
||||||
|
|
||||||
|
Annotations allow you to write custom text on specific values or on axes values. Valuable to expand the visual appeal of your chart and make it more informative.
|
||||||
|
|
||||||
|
<p align="center"><a href="https://apexcharts.com/docs/annotations/"><img src="https://apexcharts.com/media/annotations.png" alt="annotations" /></a></p>
|
||||||
|
|
||||||
|
## Mixed Charts
|
||||||
|
|
||||||
|
You can combine more than one chart type to create a combo/mixed chart. Possible combinations can be line/area/column together in a single chart. Each chart type can have its own y-axis.
|
||||||
|
|
||||||
|
<p align="center"><a href="https://apexcharts.com/javascript-chart-demos/mixed-charts/"><img src="https://apexcharts.com/wp-content/uploads/2018/05/line-column-area-mixed-chart.svg" alt="annotations" width="490" /></a></p>
|
||||||
|
|
||||||
|
## Candlestick
|
||||||
|
|
||||||
|
Use a candlestick chart (a common financial chart) to describe price changes of a security, derivative, or currency. The below image shows how you can use another chart as a brush/preview pane which acts as a handle to browse the main candlestick chart.
|
||||||
|
|
||||||
|
<p align="center"><a href="https://apexcharts.com/javascript-chart-demos/candlestick-charts/"><img src="https://apexcharts.com/media/candlestick.png" alt="candlestick" width="490" /></a></p>
|
||||||
|
|
||||||
|
## Heatmaps
|
||||||
|
|
||||||
|
Use Heatmaps to represent data through colors and shades. Frequently used with bigger data collections, they are valuable for recognizing patterns and areas of focus.
|
||||||
|
|
||||||
|
<p align="center"><a href="https://apexcharts.com/javascript-chart-demos/heatmap-charts/"><img src="https://apexcharts.com/media/heatmap-charts.png" alt="heatmap" /></a></p>
|
||||||
|
|
||||||
|
## Gauges
|
||||||
|
|
||||||
|
The tiny gauges are an important part of a dashboard and are useful in displaying single-series data. A demo of these gauges:
|
||||||
|
|
||||||
|
<p align="center"><a href="https://apexcharts.com/javascript-chart-demos/radialbar-charts/"><img src="https://apexcharts.com/media/radialbars-gauges.png" width="490" alt="radialbar-chart" /></a></p>
|
||||||
|
|
||||||
|
## Sparklines
|
||||||
|
|
||||||
|
Utilize sparklines to indicate trends in data, for example, occasional increments or declines, monetary cycles, or to feature the most extreme and least values:
|
||||||
|
|
||||||
|
<p align="center"><a href="https://apexcharts.com/javascript-chart-demos/sparklines/"><img src="https://apexcharts.com/media/sparklines.png" alt="sparkline-chart" /></a></p>
|
||||||
|
|
||||||
|
|
||||||
|
## Need Advanced Data Grid for your next project?
|
||||||
|
We partnered with Infragistics, creators of the fastest data grids on the planet! Ignite UI Grids can handle unlimited rows and columns of data while providing access to custom templates and real-time data updates.
|
||||||
|
|
||||||
|
<p align="center"><a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid" target="_blank"><img src="https://apexcharts.com/media/infragistics-data-grid.png" /></a></p>
|
||||||
|
|
||||||
|
Featuring an intuitive API for easy theming and branding, you can quickly bind to data with minimal hand-on coding. The grid is available in most of your favorite frameworks:
|
||||||
|
|
||||||
|
<a target="_blank" href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/grid">Angular Data Grid</a> | <a target="_blank" href="https://www.infragistics.com/products/ignite-ui-react/react/components/grids">React Data Grid</a> | <a target="_blank" href="https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/data-grid">Blazor Data Grid</a> | <a target="_blank" href="https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/data-grid">Web Components DataGrid</a> | <a target="_blank" href="https://www.igniteui.com/grid/overview">jQuery Data Grid </a>
|
||||||
|
|
||||||
|
## What's included
|
||||||
|
|
||||||
|
The download bundle includes the following files and directories providing a minified single file in the dist folder. Every asset including icon/css is bundled in the js itself to avoid loading multiple files.
|
||||||
|
|
||||||
|
```
|
||||||
|
apexcharts/
|
||||||
|
├── dist/
|
||||||
|
│ └── apexcharts.min.js
|
||||||
|
├── src/
|
||||||
|
│ ├── assets/
|
||||||
|
│ ├── charts/
|
||||||
|
│ ├── modules/
|
||||||
|
│ ├── utils/
|
||||||
|
│ └── apexcharts.js
|
||||||
|
└── samples/
|
||||||
|
```
|
||||||
|
|
||||||
|
## Using it with IE11
|
||||||
|
|
||||||
|
If you need to make it work with IE11, you need to include these polyfills before including ApexCharts
|
||||||
|
|
||||||
|
- [promise-polyfill](https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js)
|
||||||
|
- [classlist.js](https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill)
|
||||||
|
- [ResizeObserver polyfill](https://cdn.jsdelivr.net/npm/@juggle/resize-observer)
|
||||||
|
- [findIndex](https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn) - You will need this only if you require timeline/rangebar charts
|
||||||
|
- [canvg](https://unpkg.com/canvg@3.0.4/lib/umd.js) - You will need this only if you require PNG download of your charts
|
||||||
|
|
||||||
|
## Development
|
||||||
|
|
||||||
|
#### Install dependencies and run the project
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
This will start the webpack watch and any changes you make to `src` folder will auto-compile and output will be produced in the `dist` folder.
|
||||||
|
|
||||||
|
More details in [Contributing Guidelines](CONTRIBUTING.md).
|
||||||
|
|
||||||
|
#### Minifying the src
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
## Where do I go next?
|
||||||
|
|
||||||
|
Head over to the <a href="https://apexcharts.com/docs/">documentation</a> section to read more about how to use different kinds of charts and explore all options.
|
||||||
|
|
||||||
|
## Contacts
|
||||||
|
|
||||||
|
Email: <a href="info@apexcharts.com">info@apexcharts.com</a>
|
||||||
|
|
||||||
|
Twitter: <a href="https://twitter.com/apexcharts">@apexcharts</a>
|
||||||
|
|
||||||
|
Facebook: <a href="https://facebook.com/apexcharts">fb.com/apexcharts</a>
|
||||||
|
|
||||||
|
## Dependency
|
||||||
|
|
||||||
|
ApexCharts uses <a href="https://svgdotjs.github.io/" target="_blank">SVG.js</a> for drawing shapes, animations, applying svg filters, and a lot more under the hood. The library is bundled in the final build file, so you don't need to include it.
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
ApexCharts is released under MIT license. You are free to use, modify and distribute this software, as long as the copyright header is left intact.
|
||||||
+2
File diff suppressed because one or more lines are too long
+14
File diff suppressed because one or more lines are too long
+601
@@ -0,0 +1,601 @@
|
|||||||
|
@keyframes opaque {
|
||||||
|
0% {
|
||||||
|
opacity: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
opacity: 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes resizeanim {
|
||||||
|
0%,to {
|
||||||
|
opacity: 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-canvas {
|
||||||
|
position: relative;
|
||||||
|
user-select: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-canvas ::-webkit-scrollbar {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
width: 6px
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-canvas ::-webkit-scrollbar-thumb {
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: rgba(0,0,0,.5);
|
||||||
|
box-shadow: 0 0 1px rgba(255,255,255,.5);
|
||||||
|
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5)
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-inner {
|
||||||
|
position: relative
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-text tspan {
|
||||||
|
font-family: inherit
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-mouseover-inactive {
|
||||||
|
transition: .15s ease all;
|
||||||
|
opacity: .2
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-legend-text {
|
||||||
|
padding-left: 15px;
|
||||||
|
margin-left: -15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-series-collapsed {
|
||||||
|
opacity: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip {
|
||||||
|
border-radius: 5px;
|
||||||
|
box-shadow: 2px 2px 6px -4px #999;
|
||||||
|
cursor: default;
|
||||||
|
font-size: 14px;
|
||||||
|
left: 62px;
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
z-index: 12;
|
||||||
|
transition: .15s ease all
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip.apexcharts-active {
|
||||||
|
opacity: 1;
|
||||||
|
transition: .15s ease all
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip.apexcharts-theme-light {
|
||||||
|
border: 1px solid #e3e3e3;
|
||||||
|
background: rgba(255,255,255,.96)
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip.apexcharts-theme-dark {
|
||||||
|
color: #fff;
|
||||||
|
background: rgba(30,30,30,.8)
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip * {
|
||||||
|
font-family: inherit
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip-title {
|
||||||
|
padding: 6px;
|
||||||
|
font-size: 15px;
|
||||||
|
margin-bottom: 4px
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
|
||||||
|
background: #eceff1;
|
||||||
|
border-bottom: 1px solid #ddd
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title {
|
||||||
|
background: rgba(0,0,0,.7);
|
||||||
|
border-bottom: 1px solid #333
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip-text-goals-value,.apexcharts-tooltip-text-y-value,.apexcharts-tooltip-text-z-value {
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 5px;
|
||||||
|
font-weight: 600
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip-text-goals-label:empty,.apexcharts-tooltip-text-goals-value:empty,.apexcharts-tooltip-text-y-label:empty,.apexcharts-tooltip-text-y-value:empty,.apexcharts-tooltip-text-z-value:empty,.apexcharts-tooltip-title:empty {
|
||||||
|
display: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip-text-goals-label,.apexcharts-tooltip-text-goals-value {
|
||||||
|
padding: 6px 0 5px
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip-goals-group,.apexcharts-tooltip-text-goals-label,.apexcharts-tooltip-text-goals-value {
|
||||||
|
display: flex
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip-text-goals-label:not(:empty),.apexcharts-tooltip-text-goals-value:not(:empty) {
|
||||||
|
margin-top: -6px
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip-marker {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
position: relative;
|
||||||
|
top: 0;
|
||||||
|
margin-right: 10px;
|
||||||
|
border-radius: 50%
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip-series-group {
|
||||||
|
padding: 0 10px;
|
||||||
|
display: none;
|
||||||
|
text-align: left;
|
||||||
|
justify-content: left;
|
||||||
|
align-items: center
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip-series-group.apexcharts-active .apexcharts-tooltip-marker {
|
||||||
|
opacity: 1
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip-series-group.apexcharts-active,.apexcharts-tooltip-series-group:last-child {
|
||||||
|
padding-bottom: 4px
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip-series-group-hidden {
|
||||||
|
opacity: 0;
|
||||||
|
height: 0;
|
||||||
|
line-height: 0;
|
||||||
|
padding: 0!important
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip-y-group {
|
||||||
|
padding: 6px 0 5px
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-custom-tooltip,.apexcharts-tooltip-box {
|
||||||
|
padding: 4px 8px
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip-boxPlot {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column-reverse
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip-box>div {
|
||||||
|
margin: 4px 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip-box span.value {
|
||||||
|
font-weight: 700
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip-rangebar {
|
||||||
|
padding: 5px 8px
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip-rangebar .category {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #777
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip-rangebar .series-name {
|
||||||
|
font-weight: 700;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 5px
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-xaxistooltip,.apexcharts-yaxistooltip {
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
color: #373d3f;
|
||||||
|
font-size: 13px;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 2px;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 10;
|
||||||
|
background: #eceff1;
|
||||||
|
border: 1px solid #90a4ae
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-xaxistooltip {
|
||||||
|
padding: 9px 10px;
|
||||||
|
transition: .15s ease all
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-xaxistooltip.apexcharts-theme-dark {
|
||||||
|
background: rgba(0,0,0,.7);
|
||||||
|
border: 1px solid rgba(0,0,0,.5);
|
||||||
|
color: #fff
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-xaxistooltip:after,.apexcharts-xaxistooltip:before {
|
||||||
|
left: 50%;
|
||||||
|
border: solid transparent;
|
||||||
|
content: " ";
|
||||||
|
height: 0;
|
||||||
|
width: 0;
|
||||||
|
position: absolute;
|
||||||
|
pointer-events: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-xaxistooltip:after {
|
||||||
|
border-color: transparent;
|
||||||
|
border-width: 6px;
|
||||||
|
margin-left: -6px
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-xaxistooltip:before {
|
||||||
|
border-color: transparent;
|
||||||
|
border-width: 7px;
|
||||||
|
margin-left: -7px
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-xaxistooltip-bottom:after,.apexcharts-xaxistooltip-bottom:before {
|
||||||
|
bottom: 100%
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-xaxistooltip-top:after,.apexcharts-xaxistooltip-top:before {
|
||||||
|
top: 100%
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-xaxistooltip-bottom:after {
|
||||||
|
border-bottom-color: #eceff1
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-xaxistooltip-bottom:before {
|
||||||
|
border-bottom-color: #90a4ae
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-xaxistooltip-bottom.apexcharts-theme-dark:after,.apexcharts-xaxistooltip-bottom.apexcharts-theme-dark:before {
|
||||||
|
border-bottom-color: rgba(0,0,0,.5)
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-xaxistooltip-top:after {
|
||||||
|
border-top-color: #eceff1
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-xaxistooltip-top:before {
|
||||||
|
border-top-color: #90a4ae
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-xaxistooltip-top.apexcharts-theme-dark:after,.apexcharts-xaxistooltip-top.apexcharts-theme-dark:before {
|
||||||
|
border-top-color: rgba(0,0,0,.5)
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-xaxistooltip.apexcharts-active {
|
||||||
|
opacity: 1;
|
||||||
|
transition: .15s ease all
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-yaxistooltip {
|
||||||
|
padding: 4px 10px
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-yaxistooltip.apexcharts-theme-dark {
|
||||||
|
background: rgba(0,0,0,.7);
|
||||||
|
border: 1px solid rgba(0,0,0,.5);
|
||||||
|
color: #fff
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-yaxistooltip:after,.apexcharts-yaxistooltip:before {
|
||||||
|
top: 50%;
|
||||||
|
border: solid transparent;
|
||||||
|
content: " ";
|
||||||
|
height: 0;
|
||||||
|
width: 0;
|
||||||
|
position: absolute;
|
||||||
|
pointer-events: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-yaxistooltip:after {
|
||||||
|
border-color: transparent;
|
||||||
|
border-width: 6px;
|
||||||
|
margin-top: -6px
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-yaxistooltip:before {
|
||||||
|
border-color: transparent;
|
||||||
|
border-width: 7px;
|
||||||
|
margin-top: -7px
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-yaxistooltip-left:after,.apexcharts-yaxistooltip-left:before {
|
||||||
|
left: 100%
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-yaxistooltip-right:after,.apexcharts-yaxistooltip-right:before {
|
||||||
|
right: 100%
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-yaxistooltip-left:after {
|
||||||
|
border-left-color: #eceff1
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-yaxistooltip-left:before {
|
||||||
|
border-left-color: #90a4ae
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-yaxistooltip-left.apexcharts-theme-dark:after,.apexcharts-yaxistooltip-left.apexcharts-theme-dark:before {
|
||||||
|
border-left-color: rgba(0,0,0,.5)
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-yaxistooltip-right:after {
|
||||||
|
border-right-color: #eceff1
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-yaxistooltip-right:before {
|
||||||
|
border-right-color: #90a4ae
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-yaxistooltip-right.apexcharts-theme-dark:after,.apexcharts-yaxistooltip-right.apexcharts-theme-dark:before {
|
||||||
|
border-right-color: rgba(0,0,0,.5)
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-yaxistooltip.apexcharts-active {
|
||||||
|
opacity: 1
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-yaxistooltip-hidden {
|
||||||
|
display: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-xcrosshairs,.apexcharts-ycrosshairs {
|
||||||
|
pointer-events: none;
|
||||||
|
opacity: 0;
|
||||||
|
transition: .15s ease all
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-xcrosshairs.apexcharts-active,.apexcharts-ycrosshairs.apexcharts-active {
|
||||||
|
opacity: 1;
|
||||||
|
transition: .15s ease all
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-ycrosshairs-hidden {
|
||||||
|
opacity: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-selection-rect {
|
||||||
|
cursor: move
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg_select_boundingRect,.svg_select_points_rot {
|
||||||
|
pointer-events: none;
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-selection-rect+g .svg_select_boundingRect,.apexcharts-selection-rect+g .svg_select_points_rot {
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-selection-rect+g .svg_select_points_l,.apexcharts-selection-rect+g .svg_select_points_r {
|
||||||
|
cursor: ew-resize;
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg_select_points {
|
||||||
|
fill: #efefef;
|
||||||
|
stroke: #333;
|
||||||
|
rx: 2
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-svg.apexcharts-zoomable.hovering-zoom {
|
||||||
|
cursor: crosshair
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-svg.apexcharts-zoomable.hovering-pan {
|
||||||
|
cursor: move
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-menu-icon,.apexcharts-pan-icon,.apexcharts-reset-icon,.apexcharts-selection-icon,.apexcharts-toolbar-custom-icon,.apexcharts-zoom-icon,.apexcharts-zoomin-icon,.apexcharts-zoomout-icon {
|
||||||
|
cursor: pointer;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
line-height: 24px;
|
||||||
|
color: #6e8192;
|
||||||
|
text-align: center
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-menu-icon svg,.apexcharts-reset-icon svg,.apexcharts-zoom-icon svg,.apexcharts-zoomin-icon svg,.apexcharts-zoomout-icon svg {
|
||||||
|
fill: #6e8192
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-selection-icon svg {
|
||||||
|
fill: #444;
|
||||||
|
transform: scale(.76)
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-theme-dark .apexcharts-menu-icon svg,.apexcharts-theme-dark .apexcharts-pan-icon svg,.apexcharts-theme-dark .apexcharts-reset-icon svg,.apexcharts-theme-dark .apexcharts-selection-icon svg,.apexcharts-theme-dark .apexcharts-toolbar-custom-icon svg,.apexcharts-theme-dark .apexcharts-zoom-icon svg,.apexcharts-theme-dark .apexcharts-zoomin-icon svg,.apexcharts-theme-dark .apexcharts-zoomout-icon svg {
|
||||||
|
fill: #f3f4f5
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-canvas .apexcharts-reset-zoom-icon.apexcharts-selected svg,.apexcharts-canvas .apexcharts-selection-icon.apexcharts-selected svg,.apexcharts-canvas .apexcharts-zoom-icon.apexcharts-selected svg {
|
||||||
|
fill: #008ffb
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-theme-light .apexcharts-menu-icon:hover svg,.apexcharts-theme-light .apexcharts-reset-icon:hover svg,.apexcharts-theme-light .apexcharts-selection-icon:not(.apexcharts-selected):hover svg,.apexcharts-theme-light .apexcharts-zoom-icon:not(.apexcharts-selected):hover svg,.apexcharts-theme-light .apexcharts-zoomin-icon:hover svg,.apexcharts-theme-light .apexcharts-zoomout-icon:hover svg {
|
||||||
|
fill: #333
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-menu-icon,.apexcharts-selection-icon {
|
||||||
|
position: relative
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-reset-icon {
|
||||||
|
margin-left: 5px
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-menu-icon,.apexcharts-reset-icon,.apexcharts-zoom-icon {
|
||||||
|
transform: scale(.85)
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-zoomin-icon,.apexcharts-zoomout-icon {
|
||||||
|
transform: scale(.7)
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-zoomout-icon {
|
||||||
|
margin-right: 3px
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-pan-icon {
|
||||||
|
transform: scale(.62);
|
||||||
|
position: relative;
|
||||||
|
left: 1px;
|
||||||
|
top: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-pan-icon svg {
|
||||||
|
fill: #fff;
|
||||||
|
stroke: #6e8192;
|
||||||
|
stroke-width: 2
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-pan-icon.apexcharts-selected svg {
|
||||||
|
stroke: #008ffb
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-pan-icon:not(.apexcharts-selected):hover svg {
|
||||||
|
stroke: #333
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-toolbar {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 11;
|
||||||
|
max-width: 176px;
|
||||||
|
text-align: right;
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 0 6px 2px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-menu {
|
||||||
|
background: #fff;
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 3px;
|
||||||
|
right: 10px;
|
||||||
|
opacity: 0;
|
||||||
|
min-width: 110px;
|
||||||
|
transition: .15s ease all;
|
||||||
|
pointer-events: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-menu.apexcharts-menu-open {
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: all;
|
||||||
|
transition: .15s ease all
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-menu-item {
|
||||||
|
padding: 6px 7px;
|
||||||
|
font-size: 12px;
|
||||||
|
cursor: pointer
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-theme-light .apexcharts-menu-item:hover {
|
||||||
|
background: #eee
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-theme-dark .apexcharts-menu {
|
||||||
|
background: rgba(0,0,0,.7);
|
||||||
|
color: #fff
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width:768px) {
|
||||||
|
.apexcharts-canvas:hover .apexcharts-toolbar {
|
||||||
|
opacity: 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-canvas .apexcharts-element-hidden,.apexcharts-datalabel.apexcharts-element-hidden,.apexcharts-hide .apexcharts-series-points {
|
||||||
|
opacity: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-hidden-element-shown {
|
||||||
|
opacity: 1;
|
||||||
|
transition: 0.25s ease all;
|
||||||
|
}
|
||||||
|
.apexcharts-datalabel,.apexcharts-datalabel-label,.apexcharts-datalabel-value,.apexcharts-datalabels,.apexcharts-pie-label {
|
||||||
|
cursor: default;
|
||||||
|
pointer-events: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-pie-label-delay {
|
||||||
|
opacity: 0;
|
||||||
|
animation-name: opaque;
|
||||||
|
animation-duration: .3s;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
animation-timing-function: ease
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-radialbar-label {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-annotation-rect,.apexcharts-area-series .apexcharts-area,.apexcharts-area-series .apexcharts-series-markers .apexcharts-marker.no-pointer-events,.apexcharts-gridline,.apexcharts-line,.apexcharts-line-series .apexcharts-series-markers .apexcharts-marker.no-pointer-events,.apexcharts-point-annotation-label,.apexcharts-radar-series path,.apexcharts-radar-series polygon,.apexcharts-toolbar svg,.apexcharts-tooltip .apexcharts-marker,.apexcharts-xaxis-annotation-label,.apexcharts-yaxis-annotation-label,.apexcharts-zoom-rect {
|
||||||
|
pointer-events: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-marker {
|
||||||
|
transition: .15s ease all
|
||||||
|
}
|
||||||
|
|
||||||
|
.resize-triggers {
|
||||||
|
animation: 1ms resizeanim;
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden
|
||||||
|
}
|
||||||
|
|
||||||
|
.contract-trigger:before,.resize-triggers,.resize-triggers>div {
|
||||||
|
content: " ";
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.resize-triggers>div {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
background: #eee;
|
||||||
|
overflow: auto
|
||||||
|
}
|
||||||
|
|
||||||
|
.contract-trigger:before {
|
||||||
|
overflow: hidden;
|
||||||
|
width: 200%;
|
||||||
|
height: 200%
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-bar-goals-markers{
|
||||||
|
pointer-events: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-bar-shadows{
|
||||||
|
pointer-events: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-rangebar-goals-markers{
|
||||||
|
pointer-events: none
|
||||||
|
}
|
||||||
+14
File diff suppressed because one or more lines are too long
+34165
File diff suppressed because one or more lines are too long
+14
File diff suppressed because one or more lines are too long
+63
@@ -0,0 +1,63 @@
|
|||||||
|
{
|
||||||
|
"name": "ar",
|
||||||
|
"options": {
|
||||||
|
"months": [
|
||||||
|
"يناير",
|
||||||
|
"فبراير",
|
||||||
|
"مارس",
|
||||||
|
"أبريل",
|
||||||
|
"مايو",
|
||||||
|
"يونيو",
|
||||||
|
"يوليو",
|
||||||
|
"أغسطس",
|
||||||
|
"سبتمبر",
|
||||||
|
"أكتوبر",
|
||||||
|
"نوفمبر",
|
||||||
|
"ديسمبر"
|
||||||
|
],
|
||||||
|
"shortMonths": [
|
||||||
|
"يناير",
|
||||||
|
"فبراير",
|
||||||
|
"مارس",
|
||||||
|
"أبريل",
|
||||||
|
"مايو",
|
||||||
|
"يونيو",
|
||||||
|
"يوليو",
|
||||||
|
"أغسطس",
|
||||||
|
"سبتمبر",
|
||||||
|
"أكتوبر",
|
||||||
|
"نوفمبر",
|
||||||
|
"ديسمبر"
|
||||||
|
],
|
||||||
|
"days": [
|
||||||
|
"الأحد",
|
||||||
|
"الإثنين",
|
||||||
|
"الثلاثاء",
|
||||||
|
"الأربعاء",
|
||||||
|
"الخميس",
|
||||||
|
"الجمعة",
|
||||||
|
"السبت"
|
||||||
|
],
|
||||||
|
"shortDays": [
|
||||||
|
"أحد",
|
||||||
|
"إثنين",
|
||||||
|
"ثلاثاء",
|
||||||
|
"أربعاء",
|
||||||
|
"خميس",
|
||||||
|
"جمعة",
|
||||||
|
"سبت"
|
||||||
|
],
|
||||||
|
"toolbar": {
|
||||||
|
"exportToSVG": "تحميل بصيغة SVG",
|
||||||
|
"exportToPNG": "تحميل بصيغة PNG",
|
||||||
|
"exportToCSV": "تحميل بصيغة CSV",
|
||||||
|
"menu": "القائمة",
|
||||||
|
"selection": "تحديد",
|
||||||
|
"selectionZoom": "تكبير التحديد",
|
||||||
|
"zoomIn": "تكبير",
|
||||||
|
"zoomOut": "تصغير",
|
||||||
|
"pan": "تحريك",
|
||||||
|
"reset": "إعادة التعيين"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+55
@@ -0,0 +1,55 @@
|
|||||||
|
{
|
||||||
|
"name": "be-cyrl",
|
||||||
|
"options": {
|
||||||
|
"months": [
|
||||||
|
"Студзень",
|
||||||
|
"Люты",
|
||||||
|
"Сакавік",
|
||||||
|
"Красавік",
|
||||||
|
"Травень",
|
||||||
|
"Чэрвень",
|
||||||
|
"Ліпень",
|
||||||
|
"Жнівень",
|
||||||
|
"Верасень",
|
||||||
|
"Кастрычнік",
|
||||||
|
"Лістапад",
|
||||||
|
"Сьнежань"
|
||||||
|
],
|
||||||
|
"shortMonths": [
|
||||||
|
"Сту",
|
||||||
|
"Лют",
|
||||||
|
"Сак",
|
||||||
|
"Кра",
|
||||||
|
"Тра",
|
||||||
|
"Чэр",
|
||||||
|
"Ліп",
|
||||||
|
"Жні",
|
||||||
|
"Вер",
|
||||||
|
"Кас",
|
||||||
|
"Ліс",
|
||||||
|
"Сьн"
|
||||||
|
],
|
||||||
|
"days": [
|
||||||
|
"Нядзеля",
|
||||||
|
"Панядзелак",
|
||||||
|
"Аўторак",
|
||||||
|
"Серада",
|
||||||
|
"Чацьвер",
|
||||||
|
"Пятніца",
|
||||||
|
"Субота"
|
||||||
|
],
|
||||||
|
"shortDays": ["Нд", "Пн", "Аў", "Ср", "Чц", "Пт", "Сб"],
|
||||||
|
"toolbar": {
|
||||||
|
"exportToSVG": "Спампаваць SVG",
|
||||||
|
"exportToPNG": "Спампаваць PNG",
|
||||||
|
"exportToCSV": "Спампаваць CSV",
|
||||||
|
"menu": "Мэню",
|
||||||
|
"selection": "Вылучэньне",
|
||||||
|
"selectionZoom": "Вылучэньне з маштабаваньнем",
|
||||||
|
"zoomIn": "Наблізіць",
|
||||||
|
"zoomOut": "Аддаліць",
|
||||||
|
"pan": "Ссоўваньне",
|
||||||
|
"reset": "Скінуць маштабаваньне"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+55
@@ -0,0 +1,55 @@
|
|||||||
|
{
|
||||||
|
"name": "be-latn",
|
||||||
|
"options": {
|
||||||
|
"months": [
|
||||||
|
"Studzień",
|
||||||
|
"Luty",
|
||||||
|
"Sakavik",
|
||||||
|
"Krasavik",
|
||||||
|
"Travień",
|
||||||
|
"Červień",
|
||||||
|
"Lipień",
|
||||||
|
"Žnivień",
|
||||||
|
"Vierasień",
|
||||||
|
"Kastryčnik",
|
||||||
|
"Listapad",
|
||||||
|
"Śniežań"
|
||||||
|
],
|
||||||
|
"shortMonths": [
|
||||||
|
"Stu",
|
||||||
|
"Lut",
|
||||||
|
"Sak",
|
||||||
|
"Kra",
|
||||||
|
"Tra",
|
||||||
|
"Čer",
|
||||||
|
"Lip",
|
||||||
|
"Žni",
|
||||||
|
"Vie",
|
||||||
|
"Kas",
|
||||||
|
"Lis",
|
||||||
|
"Śni"
|
||||||
|
],
|
||||||
|
"days": [
|
||||||
|
"Niadziela",
|
||||||
|
"Paniadziełak",
|
||||||
|
"Aŭtorak",
|
||||||
|
"Sierada",
|
||||||
|
"Čaćvier",
|
||||||
|
"Piatnica",
|
||||||
|
"Subota"
|
||||||
|
],
|
||||||
|
"shortDays": ["Nd", "Pn", "Aŭ", "Sr", "Čć", "Pt", "Sb"],
|
||||||
|
"toolbar": {
|
||||||
|
"exportToSVG": "Spampavać SVG",
|
||||||
|
"exportToPNG": "Spampavać PNG",
|
||||||
|
"exportToCSV": "Spampavać CSV",
|
||||||
|
"menu": "Meniu",
|
||||||
|
"selection": "Vyłučeńnie",
|
||||||
|
"selectionZoom": "Vyłučeńnie z maštabavańniem",
|
||||||
|
"zoomIn": "Nablizić",
|
||||||
|
"zoomOut": "Addalić",
|
||||||
|
"pan": "Ssoŭvańnie",
|
||||||
|
"reset": "Skinuć maštabavańnie"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+55
@@ -0,0 +1,55 @@
|
|||||||
|
{
|
||||||
|
"name": "ca",
|
||||||
|
"options": {
|
||||||
|
"months": [
|
||||||
|
"Gener",
|
||||||
|
"Febrer",
|
||||||
|
"Març",
|
||||||
|
"Abril",
|
||||||
|
"Maig",
|
||||||
|
"Juny",
|
||||||
|
"Juliol",
|
||||||
|
"Agost",
|
||||||
|
"Setembre",
|
||||||
|
"Octubre",
|
||||||
|
"Novembre",
|
||||||
|
"Desembre"
|
||||||
|
],
|
||||||
|
"shortMonths": [
|
||||||
|
"Gen.",
|
||||||
|
"Febr.",
|
||||||
|
"Març",
|
||||||
|
"Abr.",
|
||||||
|
"Maig",
|
||||||
|
"Juny",
|
||||||
|
"Jul.",
|
||||||
|
"Ag.",
|
||||||
|
"Set.",
|
||||||
|
"Oct.",
|
||||||
|
"Nov.",
|
||||||
|
"Des."
|
||||||
|
],
|
||||||
|
"days": [
|
||||||
|
"Diumenge",
|
||||||
|
"Dilluns",
|
||||||
|
"Dimarts",
|
||||||
|
"Dimecres",
|
||||||
|
"Dijous",
|
||||||
|
"Divendres",
|
||||||
|
"Dissabte"
|
||||||
|
],
|
||||||
|
"shortDays": ["Dg", "Dl", "Dt", "Dc", "Dj", "Dv", "Ds"],
|
||||||
|
"toolbar": {
|
||||||
|
"exportToSVG": "Descarregar SVG",
|
||||||
|
"exportToPNG": "Descarregar PNG",
|
||||||
|
"exportToCSV": "Descarregar CSV",
|
||||||
|
"menu": "Menú",
|
||||||
|
"selection": "Seleccionar",
|
||||||
|
"selectionZoom": "Seleccionar Zoom",
|
||||||
|
"zoomIn": "Augmentar",
|
||||||
|
"zoomOut": "Disminuir",
|
||||||
|
"pan": "Navegació",
|
||||||
|
"reset": "Reiniciar Zoom"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+55
@@ -0,0 +1,55 @@
|
|||||||
|
{
|
||||||
|
"name": "cs",
|
||||||
|
"options": {
|
||||||
|
"months": [
|
||||||
|
"Leden",
|
||||||
|
"Únor",
|
||||||
|
"Březen",
|
||||||
|
"Duben",
|
||||||
|
"Květen",
|
||||||
|
"Červen",
|
||||||
|
"Červenec",
|
||||||
|
"Srpen",
|
||||||
|
"Září",
|
||||||
|
"Říjen",
|
||||||
|
"Listopad",
|
||||||
|
"Prosinec"
|
||||||
|
],
|
||||||
|
"shortMonths": [
|
||||||
|
"Led",
|
||||||
|
"Úno",
|
||||||
|
"Bře",
|
||||||
|
"Dub",
|
||||||
|
"Kvě",
|
||||||
|
"Čvn",
|
||||||
|
"Čvc",
|
||||||
|
"Srp",
|
||||||
|
"Zář",
|
||||||
|
"Říj",
|
||||||
|
"Lis",
|
||||||
|
"Pro"
|
||||||
|
],
|
||||||
|
"days": [
|
||||||
|
"Neděle",
|
||||||
|
"Pondělí",
|
||||||
|
"Úterý",
|
||||||
|
"Středa",
|
||||||
|
"Čtvrtek",
|
||||||
|
"Pátek",
|
||||||
|
"Sobota"
|
||||||
|
],
|
||||||
|
"shortDays": ["Ne", "Po", "Út", "St", "Čt", "Pá", "So"],
|
||||||
|
"toolbar": {
|
||||||
|
"exportToSVG": "Stáhnout SVG",
|
||||||
|
"exportToPNG": "Stáhnout PNG",
|
||||||
|
"exportToCSV": "Stáhnout CSV",
|
||||||
|
"menu": "Menu",
|
||||||
|
"selection": "Vybrat",
|
||||||
|
"selectionZoom": "Zoom: Vybrat",
|
||||||
|
"zoomIn": "Zoom: Přiblížit",
|
||||||
|
"zoomOut": "Zoom: Oddálit",
|
||||||
|
"pan": "Přesouvat",
|
||||||
|
"reset": "Resetovat"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+55
@@ -0,0 +1,55 @@
|
|||||||
|
{
|
||||||
|
"name": "da",
|
||||||
|
"options": {
|
||||||
|
"months": [
|
||||||
|
"januar",
|
||||||
|
"februar",
|
||||||
|
"marts",
|
||||||
|
"april",
|
||||||
|
"maj",
|
||||||
|
"juni",
|
||||||
|
"juli",
|
||||||
|
"august",
|
||||||
|
"september",
|
||||||
|
"oktober",
|
||||||
|
"november",
|
||||||
|
"december"
|
||||||
|
],
|
||||||
|
"shortMonths": [
|
||||||
|
"jan",
|
||||||
|
"feb",
|
||||||
|
"mar",
|
||||||
|
"apr",
|
||||||
|
"maj",
|
||||||
|
"jun",
|
||||||
|
"jul",
|
||||||
|
"aug",
|
||||||
|
"sep",
|
||||||
|
"okt",
|
||||||
|
"nov",
|
||||||
|
"dec"
|
||||||
|
],
|
||||||
|
"days": [
|
||||||
|
"Søndag",
|
||||||
|
"Mandag",
|
||||||
|
"Tirsdag",
|
||||||
|
"Onsdag",
|
||||||
|
"Torsdag",
|
||||||
|
"Fredag",
|
||||||
|
"Lørdag"
|
||||||
|
],
|
||||||
|
"shortDays": ["Søn", "Man", "Tir", "Ons", "Tor", "Fre", "Lør"],
|
||||||
|
"toolbar": {
|
||||||
|
"exportToSVG": "Download SVG",
|
||||||
|
"exportToPNG": "Download PNG",
|
||||||
|
"exportToCSV": "Download CSV",
|
||||||
|
"menu": "Menu",
|
||||||
|
"selection": "Valg",
|
||||||
|
"selectionZoom": "Zoom til valg",
|
||||||
|
"zoomIn": "Zoom ind",
|
||||||
|
"zoomOut": "Zoom ud",
|
||||||
|
"pan": "Panorér",
|
||||||
|
"reset": "Nulstil zoom"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+55
@@ -0,0 +1,55 @@
|
|||||||
|
{
|
||||||
|
"name": "de",
|
||||||
|
"options": {
|
||||||
|
"months": [
|
||||||
|
"Januar",
|
||||||
|
"Februar",
|
||||||
|
"März",
|
||||||
|
"April",
|
||||||
|
"Mai",
|
||||||
|
"Juni",
|
||||||
|
"Juli",
|
||||||
|
"August",
|
||||||
|
"September",
|
||||||
|
"Oktober",
|
||||||
|
"November",
|
||||||
|
"Dezember"
|
||||||
|
],
|
||||||
|
"shortMonths": [
|
||||||
|
"Jan",
|
||||||
|
"Feb",
|
||||||
|
"Mär",
|
||||||
|
"Apr",
|
||||||
|
"Mai",
|
||||||
|
"Jun",
|
||||||
|
"Jul",
|
||||||
|
"Aug",
|
||||||
|
"Sep",
|
||||||
|
"Okt",
|
||||||
|
"Nov",
|
||||||
|
"Dez"
|
||||||
|
],
|
||||||
|
"days": [
|
||||||
|
"Sonntag",
|
||||||
|
"Montag",
|
||||||
|
"Dienstag",
|
||||||
|
"Mittwoch",
|
||||||
|
"Donnerstag",
|
||||||
|
"Freitag",
|
||||||
|
"Samstag"
|
||||||
|
],
|
||||||
|
"shortDays": ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
|
||||||
|
"toolbar": {
|
||||||
|
"exportToSVG": "SVG speichern",
|
||||||
|
"exportToPNG": "PNG speichern",
|
||||||
|
"exportToCSV": "CSV speichern",
|
||||||
|
"menu": "Menü",
|
||||||
|
"selection": "Auswahl",
|
||||||
|
"selectionZoom": "Auswahl vergrößern",
|
||||||
|
"zoomIn": "Vergrößern",
|
||||||
|
"zoomOut": "Verkleinern",
|
||||||
|
"pan": "Verschieben",
|
||||||
|
"reset": "Zoom zurücksetzen"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+55
@@ -0,0 +1,55 @@
|
|||||||
|
{
|
||||||
|
"name": "el",
|
||||||
|
"options": {
|
||||||
|
"months": [
|
||||||
|
"Ιανουάριος",
|
||||||
|
"Φεβρουάριος",
|
||||||
|
"Μάρτιος",
|
||||||
|
"Απρίλιος",
|
||||||
|
"Μάιος",
|
||||||
|
"Ιούνιος",
|
||||||
|
"Ιούλιος",
|
||||||
|
"Αύγουστος",
|
||||||
|
"Σεπτέμβριος",
|
||||||
|
"Οκτώβριος",
|
||||||
|
"Νοέμβριος",
|
||||||
|
"Δεκέμβριος"
|
||||||
|
],
|
||||||
|
"shortMonths": [
|
||||||
|
"Ιαν",
|
||||||
|
"Φευ",
|
||||||
|
"Μαρ",
|
||||||
|
"Απρ",
|
||||||
|
"Μάι",
|
||||||
|
"Ιουν",
|
||||||
|
"Ιουλ",
|
||||||
|
"Αυγ",
|
||||||
|
"Σεπ",
|
||||||
|
"Οκτ",
|
||||||
|
"Νοε",
|
||||||
|
"Δεκ"
|
||||||
|
],
|
||||||
|
"days": [
|
||||||
|
"Κυριακή",
|
||||||
|
"Δευτέρα",
|
||||||
|
"Τρίτη",
|
||||||
|
"Τετάρτη",
|
||||||
|
"Πέμπτη",
|
||||||
|
"Παρασκευή",
|
||||||
|
"Σάββατο"
|
||||||
|
],
|
||||||
|
"shortDays": ["Κυρ", "Δευ", "Τρι", "Τετ", "Πεμ", "Παρ", "Σαβ"],
|
||||||
|
"toolbar": {
|
||||||
|
"exportToSVG": "Λήψη SVG",
|
||||||
|
"exportToPNG": "Λήψη PNG",
|
||||||
|
"exportToCSV": "Λήψη CSV",
|
||||||
|
"menu": "Menu",
|
||||||
|
"selection": "Επιλογή",
|
||||||
|
"selectionZoom": "Μεγένθυση βάση επιλογής",
|
||||||
|
"zoomIn": "Μεγένθυνση",
|
||||||
|
"zoomOut": "Σμίκρυνση",
|
||||||
|
"pan": "Μετατόπιση",
|
||||||
|
"reset": "Επαναφορά μεγένθυνσης"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+55
@@ -0,0 +1,55 @@
|
|||||||
|
{
|
||||||
|
"name": "en",
|
||||||
|
"options": {
|
||||||
|
"months": [
|
||||||
|
"January",
|
||||||
|
"February",
|
||||||
|
"March",
|
||||||
|
"April",
|
||||||
|
"May",
|
||||||
|
"June",
|
||||||
|
"July",
|
||||||
|
"August",
|
||||||
|
"September",
|
||||||
|
"October",
|
||||||
|
"November",
|
||||||
|
"December"
|
||||||
|
],
|
||||||
|
"shortMonths": [
|
||||||
|
"Jan",
|
||||||
|
"Feb",
|
||||||
|
"Mar",
|
||||||
|
"Apr",
|
||||||
|
"May",
|
||||||
|
"Jun",
|
||||||
|
"Jul",
|
||||||
|
"Aug",
|
||||||
|
"Sep",
|
||||||
|
"Oct",
|
||||||
|
"Nov",
|
||||||
|
"Dec"
|
||||||
|
],
|
||||||
|
"days": [
|
||||||
|
"Sunday",
|
||||||
|
"Monday",
|
||||||
|
"Tuesday",
|
||||||
|
"Wednesday",
|
||||||
|
"Thursday",
|
||||||
|
"Friday",
|
||||||
|
"Saturday"
|
||||||
|
],
|
||||||
|
"shortDays": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
|
||||||
|
"toolbar": {
|
||||||
|
"exportToSVG": "Download SVG",
|
||||||
|
"exportToPNG": "Download PNG",
|
||||||
|
"exportToCSV": "Download CSV",
|
||||||
|
"menu": "Menu",
|
||||||
|
"selection": "Selection",
|
||||||
|
"selectionZoom": "Selection Zoom",
|
||||||
|
"zoomIn": "Zoom In",
|
||||||
|
"zoomOut": "Zoom Out",
|
||||||
|
"pan": "Panning",
|
||||||
|
"reset": "Reset Zoom"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+55
@@ -0,0 +1,55 @@
|
|||||||
|
{
|
||||||
|
"name": "es",
|
||||||
|
"options": {
|
||||||
|
"months": [
|
||||||
|
"Enero",
|
||||||
|
"Febrero",
|
||||||
|
"Marzo",
|
||||||
|
"Abril",
|
||||||
|
"Mayo",
|
||||||
|
"Junio",
|
||||||
|
"Julio",
|
||||||
|
"Agosto",
|
||||||
|
"Septiembre",
|
||||||
|
"Octubre",
|
||||||
|
"Noviembre",
|
||||||
|
"Diciembre"
|
||||||
|
],
|
||||||
|
"shortMonths": [
|
||||||
|
"Ene",
|
||||||
|
"Feb",
|
||||||
|
"Mar",
|
||||||
|
"Abr",
|
||||||
|
"May",
|
||||||
|
"Jun",
|
||||||
|
"Jul",
|
||||||
|
"Ago",
|
||||||
|
"Sep",
|
||||||
|
"Oct",
|
||||||
|
"Nov",
|
||||||
|
"Dic"
|
||||||
|
],
|
||||||
|
"days": [
|
||||||
|
"Domingo",
|
||||||
|
"Lunes",
|
||||||
|
"Martes",
|
||||||
|
"Miércoles",
|
||||||
|
"Jueves",
|
||||||
|
"Viernes",
|
||||||
|
"Sábado"
|
||||||
|
],
|
||||||
|
"shortDays": ["Dom", "Lun", "Mar", "Mie", "Jue", "Vie", "Sab"],
|
||||||
|
"toolbar": {
|
||||||
|
"exportToSVG": "Descargar SVG",
|
||||||
|
"exportToPNG": "Descargar PNG",
|
||||||
|
"exportToCSV": "Descargar CSV",
|
||||||
|
"menu": "Menu",
|
||||||
|
"selection": "Seleccionar",
|
||||||
|
"selectionZoom": "Seleccionar Zoom",
|
||||||
|
"zoomIn": "Aumentar",
|
||||||
|
"zoomOut": "Disminuir",
|
||||||
|
"pan": "Navegación",
|
||||||
|
"reset": "Reiniciar Zoom"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+63
@@ -0,0 +1,63 @@
|
|||||||
|
{
|
||||||
|
"name": "et",
|
||||||
|
"options": {
|
||||||
|
"months": [
|
||||||
|
"jaanuar",
|
||||||
|
"veebruar",
|
||||||
|
"märts",
|
||||||
|
"aprill",
|
||||||
|
"mai",
|
||||||
|
"juuni",
|
||||||
|
"juuli",
|
||||||
|
"august",
|
||||||
|
"september",
|
||||||
|
"oktoober",
|
||||||
|
"november",
|
||||||
|
"detsember"
|
||||||
|
],
|
||||||
|
"shortMonths": [
|
||||||
|
"jaan",
|
||||||
|
"veebr",
|
||||||
|
"märts",
|
||||||
|
"apr",
|
||||||
|
"mai",
|
||||||
|
"juuni",
|
||||||
|
"juuli",
|
||||||
|
"aug",
|
||||||
|
"sept",
|
||||||
|
"okt",
|
||||||
|
"nov",
|
||||||
|
"dets"
|
||||||
|
],
|
||||||
|
"days": [
|
||||||
|
"pühapäev",
|
||||||
|
"esmaspäev",
|
||||||
|
"teisipäev",
|
||||||
|
"kolmapäev",
|
||||||
|
"neljapäev",
|
||||||
|
"reede",
|
||||||
|
"laupäev"
|
||||||
|
],
|
||||||
|
"shortDays": [
|
||||||
|
"P",
|
||||||
|
"E",
|
||||||
|
"T",
|
||||||
|
"K",
|
||||||
|
"N",
|
||||||
|
"R",
|
||||||
|
"L"
|
||||||
|
],
|
||||||
|
"toolbar": {
|
||||||
|
"exportToSVG": "Lae alla SVG",
|
||||||
|
"exportToPNG": "Lae alla PNG",
|
||||||
|
"exportToCSV": "Lae alla CSV",
|
||||||
|
"menu": "Menüü",
|
||||||
|
"selection": "Valik",
|
||||||
|
"selectionZoom": "Valiku suum",
|
||||||
|
"zoomIn": "Suurenda",
|
||||||
|
"zoomOut": "Vähenda",
|
||||||
|
"pan": "Panoraamimine",
|
||||||
|
"reset": "Lähtesta suum"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+55
@@ -0,0 +1,55 @@
|
|||||||
|
{
|
||||||
|
"name": "fa",
|
||||||
|
"options": {
|
||||||
|
"months": [
|
||||||
|
"فروردین",
|
||||||
|
"اردیبهشت",
|
||||||
|
"خرداد",
|
||||||
|
"تیر",
|
||||||
|
"مرداد",
|
||||||
|
"شهریور",
|
||||||
|
"مهر",
|
||||||
|
"آبان",
|
||||||
|
"آذر",
|
||||||
|
"دی",
|
||||||
|
"بهمن",
|
||||||
|
"اسفند"
|
||||||
|
],
|
||||||
|
"shortMonths": [
|
||||||
|
"فرو",
|
||||||
|
"ارد",
|
||||||
|
"خرد",
|
||||||
|
"تیر",
|
||||||
|
"مرد",
|
||||||
|
"شهر",
|
||||||
|
"مهر",
|
||||||
|
"آبا",
|
||||||
|
"آذر",
|
||||||
|
"دی",
|
||||||
|
"بهمـ",
|
||||||
|
"اسفـ"
|
||||||
|
],
|
||||||
|
"days": [
|
||||||
|
"یکشنبه",
|
||||||
|
"دوشنبه",
|
||||||
|
"سه شنبه",
|
||||||
|
"چهارشنبه",
|
||||||
|
"پنجشنبه",
|
||||||
|
"جمعه",
|
||||||
|
"شنبه"
|
||||||
|
],
|
||||||
|
"shortDays": ["ی", "د", "س", "چ", "پ", "ج", "ش"],
|
||||||
|
"toolbar": {
|
||||||
|
"exportToSVG": "دانلود SVG",
|
||||||
|
"exportToPNG": "دانلود PNG",
|
||||||
|
"exportToCSV": "دانلود CSV",
|
||||||
|
"menu": "منو",
|
||||||
|
"selection": "انتخاب",
|
||||||
|
"selectionZoom": "بزرگنمایی انتخابی",
|
||||||
|
"zoomIn": "بزرگنمایی",
|
||||||
|
"zoomOut": "کوچکنمایی",
|
||||||
|
"pan": "پیمایش",
|
||||||
|
"reset": "بازنشانی بزرگنمایی"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+55
@@ -0,0 +1,55 @@
|
|||||||
|
{
|
||||||
|
"name": "fi",
|
||||||
|
"options": {
|
||||||
|
"months": [
|
||||||
|
"Tammikuu",
|
||||||
|
"Helmikuu",
|
||||||
|
"Maaliskuu",
|
||||||
|
"Huhtikuu",
|
||||||
|
"Toukokuu",
|
||||||
|
"Kesäkuu",
|
||||||
|
"Heinäkuu",
|
||||||
|
"Elokuu",
|
||||||
|
"Syyskuu",
|
||||||
|
"Lokakuu",
|
||||||
|
"Marraskuu",
|
||||||
|
"Joulukuu"
|
||||||
|
],
|
||||||
|
"shortMonths": [
|
||||||
|
"Tammi",
|
||||||
|
"Helmi",
|
||||||
|
"Maalis",
|
||||||
|
"Huhti",
|
||||||
|
"Touko",
|
||||||
|
"Kesä",
|
||||||
|
"Heinä",
|
||||||
|
"Elo",
|
||||||
|
"Syys",
|
||||||
|
"Loka",
|
||||||
|
"Marras",
|
||||||
|
"Joulu"
|
||||||
|
],
|
||||||
|
"days": [
|
||||||
|
"Sunnuntai",
|
||||||
|
"Maanantai",
|
||||||
|
"Tiistai",
|
||||||
|
"Keskiviikko",
|
||||||
|
"Torstai",
|
||||||
|
"Perjantai",
|
||||||
|
"Lauantai"
|
||||||
|
],
|
||||||
|
"shortDays": ["Su", "Ma", "Ti", "Ke", "To", "Pe", "La"],
|
||||||
|
"toolbar": {
|
||||||
|
"exportToSVG": "Lataa SVG",
|
||||||
|
"exportToPNG": "Lataa PNG",
|
||||||
|
"exportToCSV": "Lataa CSV",
|
||||||
|
"menu": "Valikko",
|
||||||
|
"selection": "Valinta",
|
||||||
|
"selectionZoom": "Valinnan zoomaus",
|
||||||
|
"zoomIn": "Lähennä",
|
||||||
|
"zoomOut": "Loitonna",
|
||||||
|
"pan": "Panoroi",
|
||||||
|
"reset": "Nollaa zoomaus"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+55
@@ -0,0 +1,55 @@
|
|||||||
|
{
|
||||||
|
"name": "fr",
|
||||||
|
"options": {
|
||||||
|
"months": [
|
||||||
|
"janvier",
|
||||||
|
"février",
|
||||||
|
"mars",
|
||||||
|
"avril",
|
||||||
|
"mai",
|
||||||
|
"juin",
|
||||||
|
"juillet",
|
||||||
|
"août",
|
||||||
|
"septembre",
|
||||||
|
"octobre",
|
||||||
|
"novembre",
|
||||||
|
"décembre"
|
||||||
|
],
|
||||||
|
"shortMonths": [
|
||||||
|
"janv.",
|
||||||
|
"févr.",
|
||||||
|
"mars",
|
||||||
|
"avr.",
|
||||||
|
"mai",
|
||||||
|
"juin",
|
||||||
|
"juill.",
|
||||||
|
"août",
|
||||||
|
"sept.",
|
||||||
|
"oct.",
|
||||||
|
"nov.",
|
||||||
|
"déc."
|
||||||
|
],
|
||||||
|
"days": [
|
||||||
|
"dimanche",
|
||||||
|
"lundi",
|
||||||
|
"mardi",
|
||||||
|
"mercredi",
|
||||||
|
"jeudi",
|
||||||
|
"vendredi",
|
||||||
|
"samedi"
|
||||||
|
],
|
||||||
|
"shortDays": ["dim.", "lun.", "mar.", "mer.", "jeu.", "ven.", "sam."],
|
||||||
|
"toolbar": {
|
||||||
|
"exportToSVG": "Télécharger au format SVG",
|
||||||
|
"exportToPNG": "Télécharger au format PNG",
|
||||||
|
"exportToCSV": "Télécharger au format CSV",
|
||||||
|
"menu": "Menu",
|
||||||
|
"selection": "Sélection",
|
||||||
|
"selectionZoom": "Sélection et zoom",
|
||||||
|
"zoomIn": "Zoomer",
|
||||||
|
"zoomOut": "Dézoomer",
|
||||||
|
"pan": "Navigation",
|
||||||
|
"reset": "Réinitialiser le zoom"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+55
@@ -0,0 +1,55 @@
|
|||||||
|
{
|
||||||
|
"name": "he",
|
||||||
|
"options": {
|
||||||
|
"months": [
|
||||||
|
"ינואר",
|
||||||
|
"פברואר",
|
||||||
|
"מרץ",
|
||||||
|
"אפריל",
|
||||||
|
"מאי",
|
||||||
|
"יוני",
|
||||||
|
"יולי",
|
||||||
|
"אוגוסט",
|
||||||
|
"ספטמבר",
|
||||||
|
"אוקטובר",
|
||||||
|
"נובמבר",
|
||||||
|
"דצמבר"
|
||||||
|
],
|
||||||
|
"shortMonths": [
|
||||||
|
"ינו׳",
|
||||||
|
"פבר׳",
|
||||||
|
"מרץ",
|
||||||
|
"אפר׳",
|
||||||
|
"מאי",
|
||||||
|
"יוני",
|
||||||
|
"יולי",
|
||||||
|
"אוג׳",
|
||||||
|
"ספט׳",
|
||||||
|
"אוק׳",
|
||||||
|
"נוב׳",
|
||||||
|
"דצמ׳"
|
||||||
|
],
|
||||||
|
"days": [
|
||||||
|
"ראשון",
|
||||||
|
"שני",
|
||||||
|
"שלישי",
|
||||||
|
"רביעי",
|
||||||
|
"חמישי",
|
||||||
|
"שישי",
|
||||||
|
"שבת"
|
||||||
|
],
|
||||||
|
"shortDays": ["א׳", "ב׳", "ג׳", "ד׳", "ה׳", "ו׳", "ש׳"],
|
||||||
|
"toolbar": {
|
||||||
|
"exportToSVG": "הורד SVG",
|
||||||
|
"exportToPNG": "הורד PNG",
|
||||||
|
"exportToCSV": "הורד CSV",
|
||||||
|
"menu": "תפריט",
|
||||||
|
"selection": "בחירה",
|
||||||
|
"selectionZoom": "זום בחירה",
|
||||||
|
"zoomIn": "הגדלה",
|
||||||
|
"zoomOut": "הקטנה",
|
||||||
|
"pan": "הזזה",
|
||||||
|
"reset": "איפוס תצוגה"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+55
@@ -0,0 +1,55 @@
|
|||||||
|
{
|
||||||
|
"name": "hi",
|
||||||
|
"options": {
|
||||||
|
"months": [
|
||||||
|
"जनवरी",
|
||||||
|
"फ़रवरी",
|
||||||
|
"मार्च",
|
||||||
|
"अप्रैल",
|
||||||
|
"मई",
|
||||||
|
"जून",
|
||||||
|
"जुलाई",
|
||||||
|
"अगस्त",
|
||||||
|
"सितंबर",
|
||||||
|
"अक्टूबर",
|
||||||
|
"नवंबर",
|
||||||
|
"दिसंबर"
|
||||||
|
],
|
||||||
|
"shortMonths": [
|
||||||
|
"जनवरी",
|
||||||
|
"फ़रवरी",
|
||||||
|
"मार्च",
|
||||||
|
"अप्रैल",
|
||||||
|
"मई",
|
||||||
|
"जून",
|
||||||
|
"जुलाई",
|
||||||
|
"अगस्त",
|
||||||
|
"सितंबर",
|
||||||
|
"अक्टूबर",
|
||||||
|
"नवंबर",
|
||||||
|
"दिसंबर"
|
||||||
|
],
|
||||||
|
"days": [
|
||||||
|
"रविवार",
|
||||||
|
"सोमवार",
|
||||||
|
"मंगलवार",
|
||||||
|
"बुधवार",
|
||||||
|
"गुरुवार",
|
||||||
|
"शुक्रवार",
|
||||||
|
"शनिवार"
|
||||||
|
],
|
||||||
|
"shortDays": ["रवि", "सोम", "मंगल", "बुध", "गुरु", "शुक्र", "शनि"],
|
||||||
|
"toolbar": {
|
||||||
|
"exportToSVG": "निर्यात SVG",
|
||||||
|
"exportToPNG": "निर्यात PNG",
|
||||||
|
"exportToCSV": "निर्यात CSV",
|
||||||
|
"menu": "सूची",
|
||||||
|
"selection": "चयन",
|
||||||
|
"selectionZoom": "ज़ूम करना",
|
||||||
|
"zoomIn": "ज़ूम इन",
|
||||||
|
"zoomOut": "ज़ूम आउट",
|
||||||
|
"pan": "पैनिंग",
|
||||||
|
"reset": "फिर से कायम करना"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+55
@@ -0,0 +1,55 @@
|
|||||||
|
{
|
||||||
|
"name": "hr",
|
||||||
|
"options": {
|
||||||
|
"months": [
|
||||||
|
"Siječanj",
|
||||||
|
"Veljača",
|
||||||
|
"Ožujak",
|
||||||
|
"Travanj",
|
||||||
|
"Svibanj",
|
||||||
|
"Lipanj",
|
||||||
|
"Srpanj",
|
||||||
|
"Kolovoz",
|
||||||
|
"Rujan",
|
||||||
|
"Listopad",
|
||||||
|
"Studeni",
|
||||||
|
"Prosinac"
|
||||||
|
],
|
||||||
|
"shortMonths": [
|
||||||
|
"Sij",
|
||||||
|
"Velj",
|
||||||
|
"Ožu",
|
||||||
|
"Tra",
|
||||||
|
"Svi",
|
||||||
|
"Lip",
|
||||||
|
"Srp",
|
||||||
|
"Kol",
|
||||||
|
"Ruj",
|
||||||
|
"Lis",
|
||||||
|
"Stu",
|
||||||
|
"Pro"
|
||||||
|
],
|
||||||
|
"days": [
|
||||||
|
"Nedjelja",
|
||||||
|
"Ponedjeljak",
|
||||||
|
"Utorak",
|
||||||
|
"Srijeda",
|
||||||
|
"Četvrtak",
|
||||||
|
"Petak",
|
||||||
|
"Subota"
|
||||||
|
],
|
||||||
|
"shortDays": ["Ned", "Pon", "Uto", "Sri", "Čet", "Pet", "Sub"],
|
||||||
|
"toolbar": {
|
||||||
|
"exportToSVG": "Preuzmi SVG",
|
||||||
|
"exportToPNG": "Preuzmi PNG",
|
||||||
|
"exportToCSV": "Preuzmi CSV",
|
||||||
|
"menu": "Izbornik",
|
||||||
|
"selection": "Odabir",
|
||||||
|
"selectionZoom": "Odabirno povećanje",
|
||||||
|
"zoomIn": "Uvećajte prikaz",
|
||||||
|
"zoomOut": "Umanjite prikaz",
|
||||||
|
"pan": "Pomicanje",
|
||||||
|
"reset": "Povratak na zadani prikaz"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+64
@@ -0,0 +1,64 @@
|
|||||||
|
{
|
||||||
|
"name": "hu",
|
||||||
|
"options": {
|
||||||
|
"months": [
|
||||||
|
"január",
|
||||||
|
"február",
|
||||||
|
"március",
|
||||||
|
"április",
|
||||||
|
"május",
|
||||||
|
"június",
|
||||||
|
"július",
|
||||||
|
"augusztus",
|
||||||
|
"szeptember",
|
||||||
|
"október",
|
||||||
|
"november",
|
||||||
|
"december"
|
||||||
|
],
|
||||||
|
"shortMonths": [
|
||||||
|
"jan",
|
||||||
|
"feb",
|
||||||
|
"mar",
|
||||||
|
"ápr",
|
||||||
|
"máj",
|
||||||
|
"jún",
|
||||||
|
"júl",
|
||||||
|
"aug",
|
||||||
|
"szept",
|
||||||
|
"okt",
|
||||||
|
"nov",
|
||||||
|
"dec"
|
||||||
|
],
|
||||||
|
"days": [
|
||||||
|
"hétfő",
|
||||||
|
"kedd",
|
||||||
|
"szerda",
|
||||||
|
"csütörtök",
|
||||||
|
"péntek",
|
||||||
|
"szombat",
|
||||||
|
"vasárnap"
|
||||||
|
],
|
||||||
|
"shortDays": [
|
||||||
|
"H",
|
||||||
|
"K",
|
||||||
|
"Sze",
|
||||||
|
"Cs",
|
||||||
|
"P",
|
||||||
|
"Szo",
|
||||||
|
"V"
|
||||||
|
],
|
||||||
|
"toolbar": {
|
||||||
|
"exportToSVG": "Exportálás SVG-be",
|
||||||
|
"exportToPNG": "Exportálás PNG-be",
|
||||||
|
"exportToCSV": "Exportálás CSV-be",
|
||||||
|
"menu": "Fő ajánlat",
|
||||||
|
"download": "SVG letöltése",
|
||||||
|
"selection": "Kiválasztás",
|
||||||
|
"selectionZoom": "Nagyító kiválasztása",
|
||||||
|
"zoomIn": "Nagyítás",
|
||||||
|
"zoomOut": "Kicsinyítés",
|
||||||
|
"pan": "Képcsúsztatás",
|
||||||
|
"reset": "Nagyító visszaállítása"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+55
@@ -0,0 +1,55 @@
|
|||||||
|
{
|
||||||
|
"name": "hy",
|
||||||
|
"options": {
|
||||||
|
"months": [
|
||||||
|
"Հունվար",
|
||||||
|
"Փետրվար",
|
||||||
|
"Մարտ",
|
||||||
|
"Ապրիլ",
|
||||||
|
"Մայիս",
|
||||||
|
"Հունիս",
|
||||||
|
"Հուլիս",
|
||||||
|
"Օգոստոս",
|
||||||
|
"Սեպտեմբեր",
|
||||||
|
"Հոկտեմբեր",
|
||||||
|
"Նոյեմբեր",
|
||||||
|
"Դեկտեմբեր"
|
||||||
|
],
|
||||||
|
"shortMonths": [
|
||||||
|
"Հնվ",
|
||||||
|
"Փտվ",
|
||||||
|
"Մրտ",
|
||||||
|
"Ապր",
|
||||||
|
"Մյս",
|
||||||
|
"Հնս",
|
||||||
|
"Հլիս",
|
||||||
|
"Օգս",
|
||||||
|
"Սեպ",
|
||||||
|
"Հոկ",
|
||||||
|
"Նոյ",
|
||||||
|
"Դեկ"
|
||||||
|
],
|
||||||
|
"days": [
|
||||||
|
"Կիրակի",
|
||||||
|
"Երկուշաբթի",
|
||||||
|
"Երեքշաբթի",
|
||||||
|
"Չորեքշաբթի",
|
||||||
|
"Հինգշաբթի",
|
||||||
|
"Ուրբաթ",
|
||||||
|
"Շաբաթ"
|
||||||
|
],
|
||||||
|
"shortDays": ["Կիր", "Երկ", "Երք", "Չրք", "Հնգ", "Ուրբ", "Շբթ"],
|
||||||
|
"toolbar": {
|
||||||
|
"exportToSVG": "Բեռնել SVG",
|
||||||
|
"exportToPNG": "Բեռնել PNG",
|
||||||
|
"exportToCSV": "Բեռնել CSV",
|
||||||
|
"menu": "Մենյու",
|
||||||
|
"selection": "Ընտրված",
|
||||||
|
"selectionZoom": "Ընտրված հատվածի խոշորացում",
|
||||||
|
"zoomIn": "Խոշորացնել",
|
||||||
|
"zoomOut": "Մանրացնել",
|
||||||
|
"pan": "Տեղափոխում",
|
||||||
|
"reset": "Բերել սկզբնական վիճակի"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+47
@@ -0,0 +1,47 @@
|
|||||||
|
{
|
||||||
|
"name": "id",
|
||||||
|
"options": {
|
||||||
|
"months": [
|
||||||
|
"Januari",
|
||||||
|
"Februari",
|
||||||
|
"Maret",
|
||||||
|
"April",
|
||||||
|
"Mei",
|
||||||
|
"Juni",
|
||||||
|
"Juli",
|
||||||
|
"Agustus",
|
||||||
|
"September",
|
||||||
|
"Oktober",
|
||||||
|
"November",
|
||||||
|
"Desember"
|
||||||
|
],
|
||||||
|
"shortMonths": [
|
||||||
|
"Jan",
|
||||||
|
"Feb",
|
||||||
|
"Mar",
|
||||||
|
"Apr",
|
||||||
|
"Mei",
|
||||||
|
"Jun",
|
||||||
|
"Jul",
|
||||||
|
"Agu",
|
||||||
|
"Sep",
|
||||||
|
"Okt",
|
||||||
|
"Nov",
|
||||||
|
"Des"
|
||||||
|
],
|
||||||
|
"days": ["Minggu", "Senin", "Selasa", "Rabu", "kamis", "Jumat", "Sabtu"],
|
||||||
|
"shortDays": ["Min", "Sen", "Sel", "Rab", "Kam", "Jum", "Sab"],
|
||||||
|
"toolbar": {
|
||||||
|
"exportToSVG": "Unduh SVG",
|
||||||
|
"exportToPNG": "Unduh PNG",
|
||||||
|
"exportToCSV": "Unduh CSV",
|
||||||
|
"menu": "Menu",
|
||||||
|
"selection": "Pilihan",
|
||||||
|
"selectionZoom": "Perbesar Pilihan",
|
||||||
|
"zoomIn": "Perbesar",
|
||||||
|
"zoomOut": "Perkecil",
|
||||||
|
"pan": "Geser",
|
||||||
|
"reset": "Atur Ulang Zoom"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+55
@@ -0,0 +1,55 @@
|
|||||||
|
{
|
||||||
|
"name": "it",
|
||||||
|
"options": {
|
||||||
|
"months": [
|
||||||
|
"Gennaio",
|
||||||
|
"Febbraio",
|
||||||
|
"Marzo",
|
||||||
|
"Aprile",
|
||||||
|
"Maggio",
|
||||||
|
"Giugno",
|
||||||
|
"Luglio",
|
||||||
|
"Agosto",
|
||||||
|
"Settembre",
|
||||||
|
"Ottobre",
|
||||||
|
"Novembre",
|
||||||
|
"Dicembre"
|
||||||
|
],
|
||||||
|
"shortMonths": [
|
||||||
|
"Gen",
|
||||||
|
"Feb",
|
||||||
|
"Mar",
|
||||||
|
"Apr",
|
||||||
|
"Mag",
|
||||||
|
"Giu",
|
||||||
|
"Lug",
|
||||||
|
"Ago",
|
||||||
|
"Set",
|
||||||
|
"Ott",
|
||||||
|
"Nov",
|
||||||
|
"Dic"
|
||||||
|
],
|
||||||
|
"days": [
|
||||||
|
"Domenica",
|
||||||
|
"Lunedì",
|
||||||
|
"Martedì",
|
||||||
|
"Mercoledì",
|
||||||
|
"Giovedì",
|
||||||
|
"Venerdì",
|
||||||
|
"Sabato"
|
||||||
|
],
|
||||||
|
"shortDays": ["Dom", "Lun", "Mar", "Mer", "Gio", "Ven", "Sab"],
|
||||||
|
"toolbar": {
|
||||||
|
"exportToSVG": "Scarica SVG",
|
||||||
|
"exportToPNG": "Scarica PNG",
|
||||||
|
"exportToCSV": "Scarica CSV",
|
||||||
|
"menu": "Menu",
|
||||||
|
"selection": "Selezione",
|
||||||
|
"selectionZoom": "Seleziona Zoom",
|
||||||
|
"zoomIn": "Zoom In",
|
||||||
|
"zoomOut": "Zoom Out",
|
||||||
|
"pan": "Sposta",
|
||||||
|
"reset": "Reimposta Zoom"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+55
@@ -0,0 +1,55 @@
|
|||||||
|
{
|
||||||
|
"name": "ja",
|
||||||
|
"options": {
|
||||||
|
"months": [
|
||||||
|
"1月",
|
||||||
|
"2月",
|
||||||
|
"3月",
|
||||||
|
"4月",
|
||||||
|
"5月",
|
||||||
|
"6月",
|
||||||
|
"7月",
|
||||||
|
"8月",
|
||||||
|
"9月",
|
||||||
|
"10月",
|
||||||
|
"11月",
|
||||||
|
"12月"
|
||||||
|
],
|
||||||
|
"shortMonths": [
|
||||||
|
"1月",
|
||||||
|
"2月",
|
||||||
|
"3月",
|
||||||
|
"4月",
|
||||||
|
"5月",
|
||||||
|
"6月",
|
||||||
|
"7月",
|
||||||
|
"8月",
|
||||||
|
"9月",
|
||||||
|
"10月",
|
||||||
|
"11月",
|
||||||
|
"12月"
|
||||||
|
],
|
||||||
|
"days": [
|
||||||
|
"日曜日",
|
||||||
|
"月曜日",
|
||||||
|
"火曜日",
|
||||||
|
"水曜日",
|
||||||
|
"木曜日",
|
||||||
|
"金曜日",
|
||||||
|
"土曜日"
|
||||||
|
],
|
||||||
|
"shortDays": ["日", "月", "火", "水", "木", "金", "土"],
|
||||||
|
"toolbar": {
|
||||||
|
"exportToSVG": "SVGダウンロード",
|
||||||
|
"exportToPNG": "PNGダウンロード",
|
||||||
|
"exportToCSV": "CSVダウンロード",
|
||||||
|
"menu": "メニュー",
|
||||||
|
"selection": "選択",
|
||||||
|
"selectionZoom": "選択ズーム",
|
||||||
|
"zoomIn": "拡大",
|
||||||
|
"zoomOut": "縮小",
|
||||||
|
"pan": "パン",
|
||||||
|
"reset": "ズームリセット"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+55
@@ -0,0 +1,55 @@
|
|||||||
|
{
|
||||||
|
"name": "ka",
|
||||||
|
"options": {
|
||||||
|
"months": [
|
||||||
|
"იანვარი",
|
||||||
|
"თებერვალი",
|
||||||
|
"მარტი",
|
||||||
|
"აპრილი",
|
||||||
|
"მაისი",
|
||||||
|
"ივნისი",
|
||||||
|
"ივლისი",
|
||||||
|
"აგვისტო",
|
||||||
|
"სექტემბერი",
|
||||||
|
"ოქტომბერი",
|
||||||
|
"ნოემბერი",
|
||||||
|
"დეკემბერი"
|
||||||
|
],
|
||||||
|
"shortMonths": [
|
||||||
|
"იან",
|
||||||
|
"თებ",
|
||||||
|
"მარ",
|
||||||
|
"აპრ",
|
||||||
|
"მაი",
|
||||||
|
"ივნ",
|
||||||
|
"ივლ",
|
||||||
|
"აგვ",
|
||||||
|
"სექ",
|
||||||
|
"ოქტ",
|
||||||
|
"ნოე",
|
||||||
|
"დეკ"
|
||||||
|
],
|
||||||
|
"days": [
|
||||||
|
"კვირა",
|
||||||
|
"ორშაბათი",
|
||||||
|
"სამშაბათი",
|
||||||
|
"ოთხშაბათი",
|
||||||
|
"ხუთშაბათი",
|
||||||
|
"პარასკევი",
|
||||||
|
"შაბათი"
|
||||||
|
],
|
||||||
|
"shortDays": ["კვი", "ორშ", "სამ", "ოთხ", "ხუთ", "პარ", "შაბ"],
|
||||||
|
"toolbar": {
|
||||||
|
"exportToSVG": "გადმოქაჩე SVG",
|
||||||
|
"exportToPNG": "გადმოქაჩე PNG",
|
||||||
|
"exportToCSV": "გადმოქაჩე CSV",
|
||||||
|
"menu": "მენიუ",
|
||||||
|
"selection": "არჩევა",
|
||||||
|
"selectionZoom": "არჩეულის გადიდება",
|
||||||
|
"zoomIn": "გადიდება",
|
||||||
|
"zoomOut": "დაპატარაება",
|
||||||
|
"pan": "გადაჩოჩება",
|
||||||
|
"reset": "გადიდების გაუქმება"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+55
@@ -0,0 +1,55 @@
|
|||||||
|
{
|
||||||
|
"name": "ko",
|
||||||
|
"options": {
|
||||||
|
"months": [
|
||||||
|
"1월",
|
||||||
|
"2월",
|
||||||
|
"3월",
|
||||||
|
"4월",
|
||||||
|
"5월",
|
||||||
|
"6월",
|
||||||
|
"7월",
|
||||||
|
"8월",
|
||||||
|
"9월",
|
||||||
|
"10월",
|
||||||
|
"11월",
|
||||||
|
"12월"
|
||||||
|
],
|
||||||
|
"shortMonths": [
|
||||||
|
"1월",
|
||||||
|
"2월",
|
||||||
|
"3월",
|
||||||
|
"4월",
|
||||||
|
"5월",
|
||||||
|
"6월",
|
||||||
|
"7월",
|
||||||
|
"8월",
|
||||||
|
"9월",
|
||||||
|
"10월",
|
||||||
|
"11월",
|
||||||
|
"12월"
|
||||||
|
],
|
||||||
|
"days": [
|
||||||
|
"일요일",
|
||||||
|
"월요일",
|
||||||
|
"화요일",
|
||||||
|
"수요일",
|
||||||
|
"목요일",
|
||||||
|
"금요일",
|
||||||
|
"토요일"
|
||||||
|
],
|
||||||
|
"shortDays": ["일", "월", "화", "수", "목", "금", "토"],
|
||||||
|
"toolbar": {
|
||||||
|
"exportToSVG": "SVG 다운로드",
|
||||||
|
"exportToPNG": "PNG 다운로드",
|
||||||
|
"exportToCSV": "CSV 다운로드",
|
||||||
|
"menu": "메뉴",
|
||||||
|
"selection": "선택",
|
||||||
|
"selectionZoom": "선택영역 확대",
|
||||||
|
"zoomIn": "확대",
|
||||||
|
"zoomOut": "축소",
|
||||||
|
"pan": "패닝",
|
||||||
|
"reset": "원래대로"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+55
@@ -0,0 +1,55 @@
|
|||||||
|
{
|
||||||
|
"name": "lt",
|
||||||
|
"options": {
|
||||||
|
"months": [
|
||||||
|
"Sausis",
|
||||||
|
"Vasaris",
|
||||||
|
"Kovas",
|
||||||
|
"Balandis",
|
||||||
|
"Gegužė",
|
||||||
|
"Birželis",
|
||||||
|
"Liepa",
|
||||||
|
"Rugpjūtis",
|
||||||
|
"Rugsėjis",
|
||||||
|
"Spalis",
|
||||||
|
"Lapkritis",
|
||||||
|
"Gruodis"
|
||||||
|
],
|
||||||
|
"shortMonths": [
|
||||||
|
"Sau",
|
||||||
|
"Vas",
|
||||||
|
"Kov",
|
||||||
|
"Bal",
|
||||||
|
"Geg",
|
||||||
|
"Bir",
|
||||||
|
"Lie",
|
||||||
|
"Rgp",
|
||||||
|
"Rgs",
|
||||||
|
"Spl",
|
||||||
|
"Lap",
|
||||||
|
"Grd"
|
||||||
|
],
|
||||||
|
"days": [
|
||||||
|
"Sekmadienis",
|
||||||
|
"Pirmadienis",
|
||||||
|
"Antradienis",
|
||||||
|
"Trečiadienis",
|
||||||
|
"Ketvirtadienis",
|
||||||
|
"Penktadienis",
|
||||||
|
"Šeštadienis"
|
||||||
|
],
|
||||||
|
"shortDays": ["Sk", "Per", "An", "Tr", "Kt", "Pn", "Št"],
|
||||||
|
"toolbar": {
|
||||||
|
"exportToSVG": "Atsisiųsti SVG",
|
||||||
|
"exportToPNG": "Atsisiųsti PNG",
|
||||||
|
"exportToCSV": "Atsisiųsti CSV",
|
||||||
|
"menu": "Menu",
|
||||||
|
"selection": "Pasirinkimas",
|
||||||
|
"selectionZoom": "Zoom: Pasirinkimas",
|
||||||
|
"zoomIn": "Zoom: Priartinti",
|
||||||
|
"zoomOut": "Zoom: Atitolinti",
|
||||||
|
"pan": "Perkėlimas",
|
||||||
|
"reset": "Atstatyti"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+64
@@ -0,0 +1,64 @@
|
|||||||
|
{
|
||||||
|
"name": "lv",
|
||||||
|
"options": {
|
||||||
|
"months": [
|
||||||
|
"janvāris",
|
||||||
|
"februāris",
|
||||||
|
"marts",
|
||||||
|
"aprīlis",
|
||||||
|
"maijs",
|
||||||
|
"jūnijs",
|
||||||
|
"jūlijs",
|
||||||
|
"augusts",
|
||||||
|
"septembris",
|
||||||
|
"oktobris",
|
||||||
|
"novembris",
|
||||||
|
"decembris"
|
||||||
|
],
|
||||||
|
"shortMonths": [
|
||||||
|
"janv",
|
||||||
|
"febr",
|
||||||
|
"marts",
|
||||||
|
"apr",
|
||||||
|
"maijs",
|
||||||
|
"jūn",
|
||||||
|
"jūl",
|
||||||
|
"aug",
|
||||||
|
"sept",
|
||||||
|
"okt",
|
||||||
|
"nov",
|
||||||
|
"dec"
|
||||||
|
],
|
||||||
|
"days": [
|
||||||
|
"svētdiena",
|
||||||
|
"pirmdiena",
|
||||||
|
"otrdiena",
|
||||||
|
"trešdiena",
|
||||||
|
"ceturtdiena",
|
||||||
|
"piektdiena",
|
||||||
|
"sestdiena"
|
||||||
|
],
|
||||||
|
"shortDays": [
|
||||||
|
"Sv",
|
||||||
|
"P",
|
||||||
|
"O",
|
||||||
|
"T",
|
||||||
|
"C",
|
||||||
|
"P",
|
||||||
|
"S"
|
||||||
|
],
|
||||||
|
"toolbar": {
|
||||||
|
"exportToSVG": "Lejuplādēt SVG",
|
||||||
|
"exportToPNG": "Lejuplādēt PNG",
|
||||||
|
"exportToCSV": "Lejuplādēt CSV",
|
||||||
|
"menu": "Izvēlne",
|
||||||
|
"selection": "Atlase",
|
||||||
|
"selectionZoom": "Pietuvināt atlasi",
|
||||||
|
"zoomIn": "Pietuvināt",
|
||||||
|
"zoomOut": "Attālināt",
|
||||||
|
"pan": "Pārvietoties diagrammā",
|
||||||
|
"reset": "Atiestatīt pietuvinājumu"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
+63
@@ -0,0 +1,63 @@
|
|||||||
|
{
|
||||||
|
"name": "ms",
|
||||||
|
"options": {
|
||||||
|
"months": [
|
||||||
|
"Januari",
|
||||||
|
"Februari",
|
||||||
|
"Mac",
|
||||||
|
"April",
|
||||||
|
"Mei",
|
||||||
|
"Jun",
|
||||||
|
"Julai",
|
||||||
|
"Ogos",
|
||||||
|
"September",
|
||||||
|
"Oktober",
|
||||||
|
"November",
|
||||||
|
"Disember"
|
||||||
|
],
|
||||||
|
"shortMonths": [
|
||||||
|
"Jan",
|
||||||
|
"Feb",
|
||||||
|
"Mac",
|
||||||
|
"Apr",
|
||||||
|
"Mei",
|
||||||
|
"Jun",
|
||||||
|
"Jul",
|
||||||
|
"Ogos",
|
||||||
|
"Sep",
|
||||||
|
"Okt",
|
||||||
|
"Nov",
|
||||||
|
"Dis"
|
||||||
|
],
|
||||||
|
"days": [
|
||||||
|
"Ahad",
|
||||||
|
"Isnin",
|
||||||
|
"Selasa",
|
||||||
|
"Rabu",
|
||||||
|
"Khamis",
|
||||||
|
"Jumaat",
|
||||||
|
"Sabtu"
|
||||||
|
],
|
||||||
|
"shortDays": [
|
||||||
|
"Ahd",
|
||||||
|
"Isn",
|
||||||
|
"Sel",
|
||||||
|
"Rab",
|
||||||
|
"Kha",
|
||||||
|
"Jum",
|
||||||
|
"Sab"
|
||||||
|
],
|
||||||
|
"toolbar": {
|
||||||
|
"exportToSVG": "Muat turun SVG",
|
||||||
|
"exportToPNG": "Muat turun PNG",
|
||||||
|
"exportToCSV": "Muat turun CSV",
|
||||||
|
"menu": "Menu",
|
||||||
|
"selection": "Pilihan",
|
||||||
|
"selectionZoom": "Zum Pilihan",
|
||||||
|
"zoomIn": "Zoom Masuk",
|
||||||
|
"zoomOut": "Zoom Keluar",
|
||||||
|
"pan": "Pemusingan",
|
||||||
|
"reset": "Tetapkan Semula Zum"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+55
@@ -0,0 +1,55 @@
|
|||||||
|
{
|
||||||
|
"name": "nb",
|
||||||
|
"options": {
|
||||||
|
"months": [
|
||||||
|
"Januar",
|
||||||
|
"Februar",
|
||||||
|
"Mars",
|
||||||
|
"April",
|
||||||
|
"Mai",
|
||||||
|
"Juni",
|
||||||
|
"Juli",
|
||||||
|
"August",
|
||||||
|
"September",
|
||||||
|
"Oktober",
|
||||||
|
"November",
|
||||||
|
"Desember"
|
||||||
|
],
|
||||||
|
"shortMonths": [
|
||||||
|
"Jan",
|
||||||
|
"Feb",
|
||||||
|
"Mar",
|
||||||
|
"Apr",
|
||||||
|
"Mai",
|
||||||
|
"Jun",
|
||||||
|
"Jul",
|
||||||
|
"Aug",
|
||||||
|
"Sep",
|
||||||
|
"Okt",
|
||||||
|
"Nov",
|
||||||
|
"Des"
|
||||||
|
],
|
||||||
|
"days": [
|
||||||
|
"Søndag",
|
||||||
|
"Mandag",
|
||||||
|
"Tirsdag",
|
||||||
|
"Onsdag",
|
||||||
|
"Torsdag",
|
||||||
|
"Fredag",
|
||||||
|
"Lørdag"
|
||||||
|
],
|
||||||
|
"shortDays": ["Sø", "Ma", "Ti", "On", "To", "Fr", "Lø"],
|
||||||
|
"toolbar": {
|
||||||
|
"exportToSVG": "Last ned SVG",
|
||||||
|
"exportToPNG": "Last ned PNG",
|
||||||
|
"exportToCSV": "Last ned CSV",
|
||||||
|
"menu": "Menu",
|
||||||
|
"selection": "Velg",
|
||||||
|
"selectionZoom": "Zoom: Velg",
|
||||||
|
"zoomIn": "Zoome inn",
|
||||||
|
"zoomOut": "Zoome ut",
|
||||||
|
"pan": "Skyving",
|
||||||
|
"reset": "Start på nytt"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+55
@@ -0,0 +1,55 @@
|
|||||||
|
{
|
||||||
|
"name": "nl",
|
||||||
|
"options": {
|
||||||
|
"months": [
|
||||||
|
"Januari",
|
||||||
|
"Februari",
|
||||||
|
"Maart",
|
||||||
|
"April",
|
||||||
|
"Mei",
|
||||||
|
"Juni",
|
||||||
|
"Juli",
|
||||||
|
"Augustus",
|
||||||
|
"September",
|
||||||
|
"Oktober",
|
||||||
|
"November",
|
||||||
|
"December"
|
||||||
|
],
|
||||||
|
"shortMonths": [
|
||||||
|
"Jan",
|
||||||
|
"Feb",
|
||||||
|
"Mrt",
|
||||||
|
"Apr",
|
||||||
|
"Mei",
|
||||||
|
"Jun",
|
||||||
|
"Jul",
|
||||||
|
"Aug",
|
||||||
|
"Sep",
|
||||||
|
"Okt",
|
||||||
|
"Nov",
|
||||||
|
"Dec"
|
||||||
|
],
|
||||||
|
"days": [
|
||||||
|
"Zondag",
|
||||||
|
"Maandag",
|
||||||
|
"Dinsdag",
|
||||||
|
"Woensdag",
|
||||||
|
"Donderdag",
|
||||||
|
"Vrijdag",
|
||||||
|
"Zaterdag"
|
||||||
|
],
|
||||||
|
"shortDays": ["Zo", "Ma", "Di", "Wo", "Do", "Vr", "Za"],
|
||||||
|
"toolbar": {
|
||||||
|
"exportToSVG": "Download SVG",
|
||||||
|
"exportToPNG": "Download PNG",
|
||||||
|
"exportToCSV": "Download CSV",
|
||||||
|
"menu": "Menu",
|
||||||
|
"selection": "Selectie",
|
||||||
|
"selectionZoom": "Zoom selectie",
|
||||||
|
"zoomIn": "Zoom in",
|
||||||
|
"zoomOut": "Zoom out",
|
||||||
|
"pan": "Verplaatsen",
|
||||||
|
"reset": "Standaardwaarden"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+55
@@ -0,0 +1,55 @@
|
|||||||
|
{
|
||||||
|
"name": "pl",
|
||||||
|
"options": {
|
||||||
|
"months": [
|
||||||
|
"Styczeń",
|
||||||
|
"Luty",
|
||||||
|
"Marzec",
|
||||||
|
"Kwiecień",
|
||||||
|
"Maj",
|
||||||
|
"Czerwiec",
|
||||||
|
"Lipiec",
|
||||||
|
"Sierpień",
|
||||||
|
"Wrzesień",
|
||||||
|
"Październik",
|
||||||
|
"Listopad",
|
||||||
|
"Grudzień"
|
||||||
|
],
|
||||||
|
"shortMonths": [
|
||||||
|
"Sty",
|
||||||
|
"Lut",
|
||||||
|
"Mar",
|
||||||
|
"Kwi",
|
||||||
|
"Maj",
|
||||||
|
"Cze",
|
||||||
|
"Lip",
|
||||||
|
"Sie",
|
||||||
|
"Wrz",
|
||||||
|
"Paź",
|
||||||
|
"Lis",
|
||||||
|
"Gru"
|
||||||
|
],
|
||||||
|
"days": [
|
||||||
|
"Niedziela",
|
||||||
|
"Poniedziałek",
|
||||||
|
"Wtorek",
|
||||||
|
"Środa",
|
||||||
|
"Czwartek",
|
||||||
|
"Piątek",
|
||||||
|
"Sobota"
|
||||||
|
],
|
||||||
|
"shortDays": ["Nd", "Pn", "Wt", "Śr", "Cz", "Pt", "Sb"],
|
||||||
|
"toolbar": {
|
||||||
|
"exportToSVG": "Pobierz SVG",
|
||||||
|
"exportToPNG": "Pobierz PNG",
|
||||||
|
"exportToCSV": "Pobierz CSV",
|
||||||
|
"menu": "Menu",
|
||||||
|
"selection": "Wybieranie",
|
||||||
|
"selectionZoom": "Zoom: Wybieranie",
|
||||||
|
"zoomIn": "Zoom: Przybliż",
|
||||||
|
"zoomOut": "Zoom: Oddal",
|
||||||
|
"pan": "Przesuwanie",
|
||||||
|
"reset": "Resetuj"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+55
@@ -0,0 +1,55 @@
|
|||||||
|
{
|
||||||
|
"name": "pt-br",
|
||||||
|
"options": {
|
||||||
|
"months": [
|
||||||
|
"Janeiro",
|
||||||
|
"Fevereiro",
|
||||||
|
"Março",
|
||||||
|
"Abril",
|
||||||
|
"Maio",
|
||||||
|
"Junho",
|
||||||
|
"Julho",
|
||||||
|
"Agosto",
|
||||||
|
"Setembro",
|
||||||
|
"Outubro",
|
||||||
|
"Novembro",
|
||||||
|
"Dezembro"
|
||||||
|
],
|
||||||
|
"shortMonths": [
|
||||||
|
"Jan",
|
||||||
|
"Fev",
|
||||||
|
"Mar",
|
||||||
|
"Abr",
|
||||||
|
"Mai",
|
||||||
|
"Jun",
|
||||||
|
"Jul",
|
||||||
|
"Ago",
|
||||||
|
"Set",
|
||||||
|
"Out",
|
||||||
|
"Nov",
|
||||||
|
"Dez"
|
||||||
|
],
|
||||||
|
"days": [
|
||||||
|
"Domingo",
|
||||||
|
"Segunda",
|
||||||
|
"Terça",
|
||||||
|
"Quarta",
|
||||||
|
"Quinta",
|
||||||
|
"Sexta",
|
||||||
|
"Sábado"
|
||||||
|
],
|
||||||
|
"shortDays": ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sab"],
|
||||||
|
"toolbar": {
|
||||||
|
"exportToSVG": "Baixar SVG",
|
||||||
|
"exportToPNG": "Baixar PNG",
|
||||||
|
"exportToCSV": "Baixar CSV",
|
||||||
|
"menu": "Menu",
|
||||||
|
"selection": "Selecionar",
|
||||||
|
"selectionZoom": "Selecionar Zoom",
|
||||||
|
"zoomIn": "Aumentar",
|
||||||
|
"zoomOut": "Diminuir",
|
||||||
|
"pan": "Navegação",
|
||||||
|
"reset": "Reiniciar Zoom"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+55
@@ -0,0 +1,55 @@
|
|||||||
|
{
|
||||||
|
"name": "pt",
|
||||||
|
"options": {
|
||||||
|
"months": [
|
||||||
|
"Janeiro",
|
||||||
|
"Fevereiro",
|
||||||
|
"Março",
|
||||||
|
"Abril",
|
||||||
|
"Maio",
|
||||||
|
"Junho",
|
||||||
|
"Julho",
|
||||||
|
"Agosto",
|
||||||
|
"Setembro",
|
||||||
|
"Outubro",
|
||||||
|
"Novembro",
|
||||||
|
"Dezembro"
|
||||||
|
],
|
||||||
|
"shortMonths": [
|
||||||
|
"Jan",
|
||||||
|
"Fev",
|
||||||
|
"Mar",
|
||||||
|
"Abr",
|
||||||
|
"Mai",
|
||||||
|
"Jun",
|
||||||
|
"Jul",
|
||||||
|
"Ag",
|
||||||
|
"Set",
|
||||||
|
"Out",
|
||||||
|
"Nov",
|
||||||
|
"Dez"
|
||||||
|
],
|
||||||
|
"days": [
|
||||||
|
"Domingo",
|
||||||
|
"Segunda-feira",
|
||||||
|
"Terça-feira",
|
||||||
|
"Quarta-feira",
|
||||||
|
"Quinta-feira",
|
||||||
|
"Sexta-feira",
|
||||||
|
"Sábado"
|
||||||
|
],
|
||||||
|
"shortDays": ["Do", "Se", "Te", "Qa", "Qi", "Sx", "Sa"],
|
||||||
|
"toolbar": {
|
||||||
|
"exportToSVG": "Transferir SVG",
|
||||||
|
"exportToPNG": "Transferir PNG",
|
||||||
|
"exportToCSV": "Transferir CSV",
|
||||||
|
"menu": "Menu",
|
||||||
|
"selection": "Selecionar",
|
||||||
|
"selectionZoom": "Zoom: Selecionar",
|
||||||
|
"zoomIn": "Zoom: Aumentar",
|
||||||
|
"zoomOut": "Zoom: Diminuir",
|
||||||
|
"pan": "Deslocamento",
|
||||||
|
"reset": "Redefinir"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+55
@@ -0,0 +1,55 @@
|
|||||||
|
{
|
||||||
|
"name": "rs",
|
||||||
|
"options": {
|
||||||
|
"months": [
|
||||||
|
"Januar",
|
||||||
|
"Februar",
|
||||||
|
"Mart",
|
||||||
|
"April",
|
||||||
|
"Maj",
|
||||||
|
"Jun",
|
||||||
|
"Jul",
|
||||||
|
"Avgust",
|
||||||
|
"Septembar",
|
||||||
|
"Oktobar",
|
||||||
|
"Novembar",
|
||||||
|
"Decembar"
|
||||||
|
],
|
||||||
|
"shortMonths": [
|
||||||
|
"Jan",
|
||||||
|
"Feb",
|
||||||
|
"Mar",
|
||||||
|
"Apr",
|
||||||
|
"Maj",
|
||||||
|
"Jun",
|
||||||
|
"Jul",
|
||||||
|
"Avg",
|
||||||
|
"Sep",
|
||||||
|
"Okt",
|
||||||
|
"Nov",
|
||||||
|
"Dec"
|
||||||
|
],
|
||||||
|
"days": [
|
||||||
|
"Nedelja",
|
||||||
|
"Ponedeljak",
|
||||||
|
"Utorak",
|
||||||
|
"Sreda",
|
||||||
|
"Četvrtak",
|
||||||
|
"Petak",
|
||||||
|
"Subota"
|
||||||
|
],
|
||||||
|
"shortDays": ["Ned", "Pon", "Uto", "Sre", "Čet", "Pet", "Sub"],
|
||||||
|
"toolbar": {
|
||||||
|
"exportToSVG": "Preuzmi SVG",
|
||||||
|
"exportToPNG": "Preuzmi PNG",
|
||||||
|
"exportToCSV": "Preuzmi CSV",
|
||||||
|
"menu": "Meni",
|
||||||
|
"selection": "Odabir",
|
||||||
|
"selectionZoom": "Odabirno povećanje",
|
||||||
|
"zoomIn": "Uvećajte prikaz",
|
||||||
|
"zoomOut": "Umanjite prikaz",
|
||||||
|
"pan": "Pomeranje",
|
||||||
|
"reset": "Resetuj prikaz"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+55
@@ -0,0 +1,55 @@
|
|||||||
|
{
|
||||||
|
"name": "ru",
|
||||||
|
"options": {
|
||||||
|
"months": [
|
||||||
|
"Январь",
|
||||||
|
"Февраль",
|
||||||
|
"Март",
|
||||||
|
"Апрель",
|
||||||
|
"Май",
|
||||||
|
"Июнь",
|
||||||
|
"Июль",
|
||||||
|
"Август",
|
||||||
|
"Сентябрь",
|
||||||
|
"Октябрь",
|
||||||
|
"Ноябрь",
|
||||||
|
"Декабрь"
|
||||||
|
],
|
||||||
|
"shortMonths": [
|
||||||
|
"Янв",
|
||||||
|
"Фев",
|
||||||
|
"Мар",
|
||||||
|
"Апр",
|
||||||
|
"Май",
|
||||||
|
"Июн",
|
||||||
|
"Июл",
|
||||||
|
"Авг",
|
||||||
|
"Сен",
|
||||||
|
"Окт",
|
||||||
|
"Ноя",
|
||||||
|
"Дек"
|
||||||
|
],
|
||||||
|
"days": [
|
||||||
|
"Воскресенье",
|
||||||
|
"Понедельник",
|
||||||
|
"Вторник",
|
||||||
|
"Среда",
|
||||||
|
"Четверг",
|
||||||
|
"Пятница",
|
||||||
|
"Суббота"
|
||||||
|
],
|
||||||
|
"shortDays": ["Вс", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб"],
|
||||||
|
"toolbar": {
|
||||||
|
"exportToSVG": "Сохранить SVG",
|
||||||
|
"exportToPNG": "Сохранить PNG",
|
||||||
|
"exportToCSV": "Сохранить CSV",
|
||||||
|
"menu": "Меню",
|
||||||
|
"selection": "Выбор",
|
||||||
|
"selectionZoom": "Выбор с увеличением",
|
||||||
|
"zoomIn": "Увеличить",
|
||||||
|
"zoomOut": "Уменьшить",
|
||||||
|
"pan": "Перемещение",
|
||||||
|
"reset": "Сбросить увеличение"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+55
@@ -0,0 +1,55 @@
|
|||||||
|
{
|
||||||
|
"name": "se",
|
||||||
|
"options": {
|
||||||
|
"months": [
|
||||||
|
"Januari",
|
||||||
|
"Februari",
|
||||||
|
"Mars",
|
||||||
|
"April",
|
||||||
|
"Maj",
|
||||||
|
"Juni",
|
||||||
|
"Juli",
|
||||||
|
"Augusti",
|
||||||
|
"September",
|
||||||
|
"Oktober",
|
||||||
|
"November",
|
||||||
|
"December"
|
||||||
|
],
|
||||||
|
"shortMonths": [
|
||||||
|
"Jan",
|
||||||
|
"Feb",
|
||||||
|
"Mar",
|
||||||
|
"Apr",
|
||||||
|
"Maj",
|
||||||
|
"Juni",
|
||||||
|
"Juli",
|
||||||
|
"Aug",
|
||||||
|
"Sep",
|
||||||
|
"Okt",
|
||||||
|
"Nov",
|
||||||
|
"Dec"
|
||||||
|
],
|
||||||
|
"days": [
|
||||||
|
"Söndag",
|
||||||
|
"Måndag",
|
||||||
|
"Tisdag",
|
||||||
|
"Onsdag",
|
||||||
|
"Torsdag",
|
||||||
|
"Fredag",
|
||||||
|
"Lördag"
|
||||||
|
],
|
||||||
|
"shortDays": ["Sön", "Mån", "Tis", "Ons", "Tor", "Fre", "Lör"],
|
||||||
|
"toolbar": {
|
||||||
|
"exportToSVG": "Ladda SVG",
|
||||||
|
"exportToPNG": "Ladda PNG",
|
||||||
|
"exportToCSV": "Ladda CSV",
|
||||||
|
"menu": "Meny",
|
||||||
|
"selection": "Selektion",
|
||||||
|
"selectionZoom": "Val av zoom",
|
||||||
|
"zoomIn": "Zooma in",
|
||||||
|
"zoomOut": "Zooma ut",
|
||||||
|
"pan": "Panorering",
|
||||||
|
"reset": "Återställ zoomning"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+55
@@ -0,0 +1,55 @@
|
|||||||
|
{
|
||||||
|
"name": "sk",
|
||||||
|
"options": {
|
||||||
|
"months": [
|
||||||
|
"Január",
|
||||||
|
"Február",
|
||||||
|
"Marec",
|
||||||
|
"Apríl",
|
||||||
|
"Máj",
|
||||||
|
"Jún",
|
||||||
|
"Júl",
|
||||||
|
"August",
|
||||||
|
"September",
|
||||||
|
"Október",
|
||||||
|
"November",
|
||||||
|
"December"
|
||||||
|
],
|
||||||
|
"shortMonths": [
|
||||||
|
"Jan",
|
||||||
|
"Feb",
|
||||||
|
"Mar",
|
||||||
|
"Apr",
|
||||||
|
"Máj",
|
||||||
|
"Jún",
|
||||||
|
"Júl",
|
||||||
|
"Aug",
|
||||||
|
"Sep",
|
||||||
|
"Okt",
|
||||||
|
"Nov",
|
||||||
|
"Dec"
|
||||||
|
],
|
||||||
|
"days": [
|
||||||
|
"Nedeľa",
|
||||||
|
"Pondelok",
|
||||||
|
"Utorok",
|
||||||
|
"Streda",
|
||||||
|
"Štvrtok",
|
||||||
|
"Piatok",
|
||||||
|
"Sobota"
|
||||||
|
],
|
||||||
|
"shortDays": ["Ne", "Po", "Ut", "St", "Št", "Pi", "So"],
|
||||||
|
"toolbar": {
|
||||||
|
"exportToSVG": "Stiahnuť SVG",
|
||||||
|
"exportToPNG": "Stiahnuť PNG",
|
||||||
|
"exportToCSV": "Stiahnuť CSV",
|
||||||
|
"menu": "Menu",
|
||||||
|
"selection": "Vyberanie",
|
||||||
|
"selectionZoom": "Zoom: Vyberanie",
|
||||||
|
"zoomIn": "Zoom: Priblížiť",
|
||||||
|
"zoomOut": "Zoom: Vzdialiť",
|
||||||
|
"pan": "Presúvanie",
|
||||||
|
"reset": "Resetovať"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+55
@@ -0,0 +1,55 @@
|
|||||||
|
{
|
||||||
|
"name": "sl",
|
||||||
|
"options": {
|
||||||
|
"months": [
|
||||||
|
"Januar",
|
||||||
|
"Februar",
|
||||||
|
"Marec",
|
||||||
|
"April",
|
||||||
|
"Maj",
|
||||||
|
"Junij",
|
||||||
|
"Julij",
|
||||||
|
"Avgust",
|
||||||
|
"Septemer",
|
||||||
|
"Oktober",
|
||||||
|
"November",
|
||||||
|
"December"
|
||||||
|
],
|
||||||
|
"shortMonths": [
|
||||||
|
"Jan",
|
||||||
|
"Feb",
|
||||||
|
"Mar",
|
||||||
|
"Apr",
|
||||||
|
"Maj",
|
||||||
|
"Jun",
|
||||||
|
"Jul",
|
||||||
|
"Avg",
|
||||||
|
"Sep",
|
||||||
|
"Okt",
|
||||||
|
"Nov",
|
||||||
|
"Dec"
|
||||||
|
],
|
||||||
|
"days": [
|
||||||
|
"Nedelja",
|
||||||
|
"Ponedeljek",
|
||||||
|
"Torek",
|
||||||
|
"Sreda",
|
||||||
|
"Četrtek",
|
||||||
|
"Petek",
|
||||||
|
"Sobota"
|
||||||
|
],
|
||||||
|
"shortDays": ["Ne", "Po", "To", "Sr", "Če", "Pe", "So"],
|
||||||
|
"toolbar": {
|
||||||
|
"exportToSVG": "Prenesi SVG",
|
||||||
|
"exportToPNG": "Prenesi PNG",
|
||||||
|
"exportToCSV": "Prenesi CSV",
|
||||||
|
"menu": "Menu",
|
||||||
|
"selection": "Izbiranje",
|
||||||
|
"selectionZoom": "Zoom: Izbira",
|
||||||
|
"zoomIn": "Zoom: Približaj",
|
||||||
|
"zoomOut": "Zoom: Oddalji",
|
||||||
|
"pan": "Pomikanje",
|
||||||
|
"reset": "Resetiraj"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+55
@@ -0,0 +1,55 @@
|
|||||||
|
{
|
||||||
|
"name": "sq",
|
||||||
|
"options": {
|
||||||
|
"months": [
|
||||||
|
"Janar",
|
||||||
|
"Shkurt",
|
||||||
|
"Mars",
|
||||||
|
"Prill",
|
||||||
|
"Maj",
|
||||||
|
"Qershor",
|
||||||
|
"Korrik",
|
||||||
|
"Gusht",
|
||||||
|
"Shtator",
|
||||||
|
"Tetor",
|
||||||
|
"Nëntor",
|
||||||
|
"Dhjetor"
|
||||||
|
],
|
||||||
|
"shortMonths": [
|
||||||
|
"Jan",
|
||||||
|
"Shk",
|
||||||
|
"Mar",
|
||||||
|
"Pr",
|
||||||
|
"Maj",
|
||||||
|
"Qer",
|
||||||
|
"Korr",
|
||||||
|
"Gush",
|
||||||
|
"Sht",
|
||||||
|
"Tet",
|
||||||
|
"Nën",
|
||||||
|
"Dhj"
|
||||||
|
],
|
||||||
|
"days": [
|
||||||
|
"e Dielë",
|
||||||
|
"e Hënë",
|
||||||
|
"e Martë",
|
||||||
|
"e Mërkurë",
|
||||||
|
"e Enjte",
|
||||||
|
"e Premte",
|
||||||
|
"e Shtunë"
|
||||||
|
],
|
||||||
|
"shortDays": ["Die", "Hën", "Mar", "Mër", "Enj", "Pre", "Sht"],
|
||||||
|
"toolbar": {
|
||||||
|
"exportToSVG": "Shkarko SVG",
|
||||||
|
"exportToPNG": "Shkarko PNG",
|
||||||
|
"exportToCSV": "Shkarko CSV",
|
||||||
|
"menu": "Menu",
|
||||||
|
"selection": "Seleksiono",
|
||||||
|
"selectionZoom": "Seleksiono Zmadhim",
|
||||||
|
"zoomIn": "Zmadho",
|
||||||
|
"zoomOut": "Zvogëlo",
|
||||||
|
"pan": "Spostoje",
|
||||||
|
"reset": "Rikthe dimensionin"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+55
@@ -0,0 +1,55 @@
|
|||||||
|
{
|
||||||
|
"name": "th",
|
||||||
|
"options": {
|
||||||
|
"months": [
|
||||||
|
"มกราคม",
|
||||||
|
"กุมภาพันธ์",
|
||||||
|
"มีนาคม",
|
||||||
|
"เมษายน",
|
||||||
|
"พฤษภาคม",
|
||||||
|
"มิถุนายน",
|
||||||
|
"กรกฎาคม",
|
||||||
|
"สิงหาคม",
|
||||||
|
"กันยายน",
|
||||||
|
"ตุลาคม",
|
||||||
|
"พฤศจิกายน",
|
||||||
|
"ธันวาคม"
|
||||||
|
],
|
||||||
|
"shortMonths": [
|
||||||
|
"ม.ค.",
|
||||||
|
"ก.พ.",
|
||||||
|
"มี.ค.",
|
||||||
|
"เม.ย.",
|
||||||
|
"พ.ค.",
|
||||||
|
"มิ.ย.",
|
||||||
|
"ก.ค.",
|
||||||
|
"ส.ค.",
|
||||||
|
"ก.ย.",
|
||||||
|
"ต.ค.",
|
||||||
|
"พ.ย.",
|
||||||
|
"ธ.ค."
|
||||||
|
],
|
||||||
|
"days": [
|
||||||
|
"อาทิตย์",
|
||||||
|
"จันทร์",
|
||||||
|
"อังคาร",
|
||||||
|
"พุธ",
|
||||||
|
"พฤหัสบดี",
|
||||||
|
"ศุกร์",
|
||||||
|
"เสาร์"
|
||||||
|
],
|
||||||
|
"shortDays": ["อา", "จ", "อ", "พ", "พฤ", "ศ", "ส"],
|
||||||
|
"toolbar": {
|
||||||
|
"exportToSVG": "ดาวน์โหลด SVG",
|
||||||
|
"exportToPNG": "ดาวน์โหลด PNG",
|
||||||
|
"exportToCSV": "ดาวน์โหลด CSV",
|
||||||
|
"menu": "เมนู",
|
||||||
|
"selection": "เลือก",
|
||||||
|
"selectionZoom": "เลือกจุดที่จะซูม",
|
||||||
|
"zoomIn": "ซูมเข้า",
|
||||||
|
"zoomOut": "ซูมออก",
|
||||||
|
"pan": "ปรากฎว่า",
|
||||||
|
"reset": "รีเซ็ตการซูม"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+55
@@ -0,0 +1,55 @@
|
|||||||
|
{
|
||||||
|
"name": "tr",
|
||||||
|
"options": {
|
||||||
|
"months": [
|
||||||
|
"Ocak",
|
||||||
|
"Şubat",
|
||||||
|
"Mart",
|
||||||
|
"Nisan",
|
||||||
|
"Mayıs",
|
||||||
|
"Haziran",
|
||||||
|
"Temmuz",
|
||||||
|
"Ağustos",
|
||||||
|
"Eylül",
|
||||||
|
"Ekim",
|
||||||
|
"Kasım",
|
||||||
|
"Aralık"
|
||||||
|
],
|
||||||
|
"shortMonths": [
|
||||||
|
"Oca",
|
||||||
|
"Şub",
|
||||||
|
"Mar",
|
||||||
|
"Nis",
|
||||||
|
"May",
|
||||||
|
"Haz",
|
||||||
|
"Tem",
|
||||||
|
"Ağu",
|
||||||
|
"Eyl",
|
||||||
|
"Eki",
|
||||||
|
"Kas",
|
||||||
|
"Ara"
|
||||||
|
],
|
||||||
|
"days": [
|
||||||
|
"Pazar",
|
||||||
|
"Pazartesi",
|
||||||
|
"Salı",
|
||||||
|
"Çarşamba",
|
||||||
|
"Perşembe",
|
||||||
|
"Cuma",
|
||||||
|
"Cumartesi"
|
||||||
|
],
|
||||||
|
"shortDays": ["Paz", "Pzt", "Sal", "Çar", "Per", "Cum", "Cmt"],
|
||||||
|
"toolbar": {
|
||||||
|
"exportToSVG": "SVG İndir",
|
||||||
|
"exportToPNG": "PNG İndir",
|
||||||
|
"exportToCSV": "CSV İndir",
|
||||||
|
"menu": "Menü",
|
||||||
|
"selection": "Seçim",
|
||||||
|
"selectionZoom": "Seçim Yakınlaştır",
|
||||||
|
"zoomIn": "Yakınlaştır",
|
||||||
|
"zoomOut": "Uzaklaştır",
|
||||||
|
"pan": "Kaydır",
|
||||||
|
"reset": "Yakınlaştırmayı Sıfırla"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+55
@@ -0,0 +1,55 @@
|
|||||||
|
{
|
||||||
|
"name": "ua",
|
||||||
|
"options": {
|
||||||
|
"months": [
|
||||||
|
"Січень",
|
||||||
|
"Лютий",
|
||||||
|
"Березень",
|
||||||
|
"Квітень",
|
||||||
|
"Травень",
|
||||||
|
"Червень",
|
||||||
|
"Липень",
|
||||||
|
"Серпень",
|
||||||
|
"Вересень",
|
||||||
|
"Жовтень",
|
||||||
|
"Листопад",
|
||||||
|
"Грудень"
|
||||||
|
],
|
||||||
|
"shortMonths": [
|
||||||
|
"Січ",
|
||||||
|
"Лют",
|
||||||
|
"Бер",
|
||||||
|
"Кві",
|
||||||
|
"Тра",
|
||||||
|
"Чер",
|
||||||
|
"Лип",
|
||||||
|
"Сер",
|
||||||
|
"Вер",
|
||||||
|
"Жов",
|
||||||
|
"Лис",
|
||||||
|
"Гру"
|
||||||
|
],
|
||||||
|
"days": [
|
||||||
|
"Неділя",
|
||||||
|
"Понеділок",
|
||||||
|
"Вівторок",
|
||||||
|
"Середа",
|
||||||
|
"Четвер",
|
||||||
|
"П'ятниця",
|
||||||
|
"Субота"
|
||||||
|
],
|
||||||
|
"shortDays": ["Нд", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб"],
|
||||||
|
"toolbar": {
|
||||||
|
"exportToSVG": "Зберегти SVG",
|
||||||
|
"exportToPNG": "Зберегти PNG",
|
||||||
|
"exportToCSV": "Зберегти CSV",
|
||||||
|
"menu": "Меню",
|
||||||
|
"selection": "Вибір",
|
||||||
|
"selectionZoom": "Вибір із збільшенням",
|
||||||
|
"zoomIn": "Збільшити",
|
||||||
|
"zoomOut": "Зменшити",
|
||||||
|
"pan": "Переміщення",
|
||||||
|
"reset": "Скинути збільшення"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+55
@@ -0,0 +1,55 @@
|
|||||||
|
{
|
||||||
|
"name": "zh-cn",
|
||||||
|
"options": {
|
||||||
|
"months": [
|
||||||
|
"一月",
|
||||||
|
"二月",
|
||||||
|
"三月",
|
||||||
|
"四月",
|
||||||
|
"五月",
|
||||||
|
"六月",
|
||||||
|
"七月",
|
||||||
|
"八月",
|
||||||
|
"九月",
|
||||||
|
"十月",
|
||||||
|
"十一月",
|
||||||
|
"十二月"
|
||||||
|
],
|
||||||
|
"shortMonths": [
|
||||||
|
"一月",
|
||||||
|
"二月",
|
||||||
|
"三月",
|
||||||
|
"四月",
|
||||||
|
"五月",
|
||||||
|
"六月",
|
||||||
|
"七月",
|
||||||
|
"八月",
|
||||||
|
"九月",
|
||||||
|
"十月",
|
||||||
|
"十一月",
|
||||||
|
"十二月"
|
||||||
|
],
|
||||||
|
"days": [
|
||||||
|
"星期天",
|
||||||
|
"星期一",
|
||||||
|
"星期二",
|
||||||
|
"星期三",
|
||||||
|
"星期四",
|
||||||
|
"星期五",
|
||||||
|
"星期六"
|
||||||
|
],
|
||||||
|
"shortDays": ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
|
||||||
|
"toolbar": {
|
||||||
|
"exportToSVG": "下载 SVG",
|
||||||
|
"exportToPNG": "下载 PNG",
|
||||||
|
"exportToCSV": "下载 CSV",
|
||||||
|
"menu": "菜单",
|
||||||
|
"selection": "选择",
|
||||||
|
"selectionZoom": "选择缩放",
|
||||||
|
"zoomIn": "放大",
|
||||||
|
"zoomOut": "缩小",
|
||||||
|
"pan": "平移",
|
||||||
|
"reset": "重置缩放"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+55
@@ -0,0 +1,55 @@
|
|||||||
|
{
|
||||||
|
"name": "zh-tw",
|
||||||
|
"options": {
|
||||||
|
"months": [
|
||||||
|
"一月",
|
||||||
|
"二月",
|
||||||
|
"三月",
|
||||||
|
"四月",
|
||||||
|
"五月",
|
||||||
|
"六月",
|
||||||
|
"七月",
|
||||||
|
"八月",
|
||||||
|
"九月",
|
||||||
|
"十月",
|
||||||
|
"十一月",
|
||||||
|
"十二月"
|
||||||
|
],
|
||||||
|
"shortMonths": [
|
||||||
|
"一月",
|
||||||
|
"二月",
|
||||||
|
"三月",
|
||||||
|
"四月",
|
||||||
|
"五月",
|
||||||
|
"六月",
|
||||||
|
"七月",
|
||||||
|
"八月",
|
||||||
|
"九月",
|
||||||
|
"十月",
|
||||||
|
"十一月",
|
||||||
|
"十二月"
|
||||||
|
],
|
||||||
|
"days": [
|
||||||
|
"星期日",
|
||||||
|
"星期一",
|
||||||
|
"星期二",
|
||||||
|
"星期三",
|
||||||
|
"星期四",
|
||||||
|
"星期五",
|
||||||
|
"星期六"
|
||||||
|
],
|
||||||
|
"shortDays": ["週日", "週一", "週二", "週三", "週四", "週五", "週六"],
|
||||||
|
"toolbar": {
|
||||||
|
"exportToSVG": "下載 SVG",
|
||||||
|
"exportToPNG": "下載 PNG",
|
||||||
|
"exportToCSV": "下載 CSV",
|
||||||
|
"menu": "菜單",
|
||||||
|
"selection": "選擇",
|
||||||
|
"selectionZoom": "選擇縮放",
|
||||||
|
"zoomIn": "放大",
|
||||||
|
"zoomOut": "縮小",
|
||||||
|
"pan": "平移",
|
||||||
|
"reset": "重置縮放"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+108
@@ -0,0 +1,108 @@
|
|||||||
|
{
|
||||||
|
"name": "apexcharts",
|
||||||
|
"version": "3.46.0",
|
||||||
|
"description": "A JavaScript Chart Library",
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://github.com/apexcharts/apexcharts.js.git"
|
||||||
|
},
|
||||||
|
"main": "dist/apexcharts.common.js",
|
||||||
|
"unpkg": "dist/apexcharts.js",
|
||||||
|
"jsdelivr": "dist/apexcharts.js",
|
||||||
|
"typings": "types/apexcharts.d.ts",
|
||||||
|
"files": [
|
||||||
|
"src",
|
||||||
|
"dist/*.js",
|
||||||
|
"dist/*.css",
|
||||||
|
"dist/locales/*.json",
|
||||||
|
"types/*.d.ts"
|
||||||
|
],
|
||||||
|
"scripts": {
|
||||||
|
"dev": "rollup -w -c build/config.js --environment TARGET:web-umd-dev",
|
||||||
|
"dev:cjs": "rollup -w -c build/config.js --environment TARGET:web-cjs",
|
||||||
|
"bundle": "node build/build.js",
|
||||||
|
"build": "npm run bundle && webpack",
|
||||||
|
"build:umd": "rollup -w -c build/config.js --environment TARGET:web-umd-dev",
|
||||||
|
"build:amd": "webpack",
|
||||||
|
"lint": "eslint .",
|
||||||
|
"lint:fix": "eslint . --fix",
|
||||||
|
"test": "npm run e2e && npm run unit",
|
||||||
|
"unit": "jest tests/unit/",
|
||||||
|
"e2e": "node tests/e2e/samples.js test",
|
||||||
|
"e2e:update": "node tests/e2e/samples.js update",
|
||||||
|
"build:samples": "node samples/source/index.js generate"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@yr/monotone-cubic-spline": "^1.0.3",
|
||||||
|
"svg.draggable.js": "^2.2.2",
|
||||||
|
"svg.easing.js": "^2.0.0",
|
||||||
|
"svg.filter.js": "^2.0.2",
|
||||||
|
"svg.pathmorphing.js": "^0.1.3",
|
||||||
|
"svg.resize.js": "^1.4.3",
|
||||||
|
"svg.select.js": "^3.0.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@babel/core": "^7.8.7",
|
||||||
|
"@babel/plugin-proposal-class-properties": "^7.8.3",
|
||||||
|
"@babel/preset-env": "^7.8.7",
|
||||||
|
"@rollup/plugin-babel": "^5.2.1",
|
||||||
|
"@rollup/plugin-json": "4.0.1",
|
||||||
|
"@rollup/plugin-node-resolve": "6.0.0",
|
||||||
|
"@rollup/plugin-replace": "2.3.0",
|
||||||
|
"@rollup/plugin-strip": "1.3.1",
|
||||||
|
"babel-eslint": "10.0.3",
|
||||||
|
"babel-jest": "27.3.1",
|
||||||
|
"babel-loader": "8.0.6",
|
||||||
|
"babel-plugin-istanbul": "6.0.0",
|
||||||
|
"chalk": "3.0.0",
|
||||||
|
"css-loader": "6.10.0",
|
||||||
|
"eslint": "8.36.0",
|
||||||
|
"eslint-config-prettier": "8.8.0",
|
||||||
|
"eslint-loader": "3.0.3",
|
||||||
|
"eslint-plugin-import": "^2.27.5",
|
||||||
|
"eslint-plugin-prettier": "3.1.2",
|
||||||
|
"eslint-plugin-promise": "4.2.1",
|
||||||
|
"eslint-webpack-plugin": "4.0.0",
|
||||||
|
"fs-extra": "8.1.0",
|
||||||
|
"jest": "27.3.1",
|
||||||
|
"nunjucks": "3.2.4",
|
||||||
|
"nyc": "15.0.0",
|
||||||
|
"pixelmatch": "5.1.0",
|
||||||
|
"pngjs": "3.4.0",
|
||||||
|
"postcss": "^8.4.21",
|
||||||
|
"prettier": "2.8.5",
|
||||||
|
"puppeteer": "2.0.0",
|
||||||
|
"puppeteer-cluster": "0.18.0",
|
||||||
|
"rollup": "3.20.0",
|
||||||
|
"rollup-plugin-babel": "4.4.0",
|
||||||
|
"rollup-plugin-copy-glob": "0.3.2",
|
||||||
|
"rollup-plugin-postcss": "4.0.2",
|
||||||
|
"rollup-plugin-svgo": "2.0.0",
|
||||||
|
"rollup-plugin-terser": "7.0.2",
|
||||||
|
"style-loader": "1.1.2",
|
||||||
|
"svg-inline-loader": "0.8.2",
|
||||||
|
"terser": "5.16.6",
|
||||||
|
"tslint": "6.1.3",
|
||||||
|
"typescript": "5.0.2",
|
||||||
|
"webpack": "5.76.0",
|
||||||
|
"webpack-bundle-analyzer": "4.8.0",
|
||||||
|
"webpack-cli": "5.0.1"
|
||||||
|
},
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/apexcharts/apexcharts.js/issues"
|
||||||
|
},
|
||||||
|
"license": "MIT",
|
||||||
|
"licenses": [
|
||||||
|
{
|
||||||
|
"type": "MIT",
|
||||||
|
"url": "http://www.opensource.org/licenses/mit-license.php"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"homepage": "https://apexcharts.com",
|
||||||
|
"keywords": [
|
||||||
|
"charts",
|
||||||
|
"graphs",
|
||||||
|
"visualizations",
|
||||||
|
"data"
|
||||||
|
]
|
||||||
|
}
|
||||||
+779
@@ -0,0 +1,779 @@
|
|||||||
|
import Annotations from './modules/annotations/Annotations'
|
||||||
|
import Base from './modules/Base'
|
||||||
|
import CoreUtils from './modules/CoreUtils'
|
||||||
|
import DataLabels from './modules/DataLabels'
|
||||||
|
import Defaults from './modules/settings/Defaults'
|
||||||
|
import Exports from './modules/Exports'
|
||||||
|
import Grid from './modules/axes/Grid'
|
||||||
|
import Markers from './modules/Markers'
|
||||||
|
import Range from './modules/Range'
|
||||||
|
import Utils from './utils/Utils'
|
||||||
|
import XAxis from './modules/axes/XAxis'
|
||||||
|
import YAxis from './modules/axes/YAxis'
|
||||||
|
import InitCtxVariables from './modules/helpers/InitCtxVariables'
|
||||||
|
import Destroy from './modules/helpers/Destroy'
|
||||||
|
import { addResizeListener, removeResizeListener } from './utils/Resize'
|
||||||
|
import apexCSS from './assets/apexcharts.css'
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @module ApexCharts
|
||||||
|
**/
|
||||||
|
|
||||||
|
export default class ApexCharts {
|
||||||
|
constructor(el, opts) {
|
||||||
|
this.opts = opts
|
||||||
|
this.ctx = this
|
||||||
|
|
||||||
|
// Pass the user supplied options to the Base Class where these options will be extended with defaults. The returned object from Base Class will become the config object in the entire codebase.
|
||||||
|
this.w = new Base(opts).init()
|
||||||
|
|
||||||
|
this.el = el
|
||||||
|
|
||||||
|
this.w.globals.cuid = Utils.randomId()
|
||||||
|
this.w.globals.chartID = this.w.config.chart.id
|
||||||
|
? Utils.escapeString(this.w.config.chart.id)
|
||||||
|
: this.w.globals.cuid
|
||||||
|
|
||||||
|
const initCtx = new InitCtxVariables(this)
|
||||||
|
initCtx.initModules()
|
||||||
|
|
||||||
|
this.create = Utils.bind(this.create, this)
|
||||||
|
this.windowResizeHandler = this._windowResizeHandler.bind(this)
|
||||||
|
this.parentResizeHandler = this._parentResizeCallback.bind(this)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The primary method user will call to render the chart.
|
||||||
|
*/
|
||||||
|
render() {
|
||||||
|
// main method
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
// only draw chart, if element found
|
||||||
|
if (this.el !== null) {
|
||||||
|
if (typeof Apex._chartInstances === 'undefined') {
|
||||||
|
Apex._chartInstances = []
|
||||||
|
}
|
||||||
|
if (this.w.config.chart.id) {
|
||||||
|
Apex._chartInstances.push({
|
||||||
|
id: this.w.globals.chartID,
|
||||||
|
group: this.w.config.chart.group,
|
||||||
|
chart: this,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// set the locale here
|
||||||
|
this.setLocale(this.w.config.chart.defaultLocale)
|
||||||
|
const beforeMount = this.w.config.chart.events.beforeMount
|
||||||
|
if (typeof beforeMount === 'function') {
|
||||||
|
beforeMount(this, this.w)
|
||||||
|
}
|
||||||
|
|
||||||
|
this.events.fireEvent('beforeMount', [this, this.w])
|
||||||
|
window.addEventListener('resize', this.windowResizeHandler)
|
||||||
|
addResizeListener(this.el.parentNode, this.parentResizeHandler)
|
||||||
|
|
||||||
|
// Add CSS if not already added
|
||||||
|
if (!this.css) {
|
||||||
|
let rootNode = this.el.getRootNode && this.el.getRootNode()
|
||||||
|
let inShadowRoot = Utils.is('ShadowRoot', rootNode)
|
||||||
|
let doc = this.el.ownerDocument
|
||||||
|
let globalCSS = doc.getElementById('apexcharts-css')
|
||||||
|
|
||||||
|
if (inShadowRoot || !globalCSS) {
|
||||||
|
this.css = document.createElement('style')
|
||||||
|
this.css.id = 'apexcharts-css'
|
||||||
|
this.css.textContent = apexCSS
|
||||||
|
const nonce = this.opts.chart?.nonce || this.w.config.chart.nonce;
|
||||||
|
if (nonce) {
|
||||||
|
this.css.setAttribute('nonce', nonce);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (inShadowRoot) {
|
||||||
|
// We are in Shadow DOM, add to shadow root
|
||||||
|
rootNode.prepend(this.css)
|
||||||
|
} else {
|
||||||
|
// Add to <head> of element's document
|
||||||
|
doc.head.appendChild(this.css)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let graphData = this.create(this.w.config.series, {})
|
||||||
|
if (!graphData) return resolve(this)
|
||||||
|
this.mount(graphData)
|
||||||
|
.then(() => {
|
||||||
|
if (typeof this.w.config.chart.events.mounted === 'function') {
|
||||||
|
this.w.config.chart.events.mounted(this, this.w)
|
||||||
|
}
|
||||||
|
|
||||||
|
this.events.fireEvent('mounted', [this, this.w])
|
||||||
|
resolve(graphData)
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
reject(e)
|
||||||
|
// handle error in case no data or element not found
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
reject(new Error('Element not found'))
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
create(ser, opts) {
|
||||||
|
let w = this.w
|
||||||
|
|
||||||
|
const initCtx = new InitCtxVariables(this)
|
||||||
|
initCtx.initModules()
|
||||||
|
let gl = this.w.globals
|
||||||
|
|
||||||
|
gl.noData = false
|
||||||
|
gl.animationEnded = false
|
||||||
|
|
||||||
|
this.responsive.checkResponsiveConfig(opts)
|
||||||
|
|
||||||
|
if (w.config.xaxis.convertedCatToNumeric) {
|
||||||
|
const defaults = new Defaults(w.config)
|
||||||
|
defaults.convertCatToNumericXaxis(w.config, this.ctx)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.el === null) {
|
||||||
|
gl.animationEnded = true
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
this.core.setupElements()
|
||||||
|
|
||||||
|
if (w.config.chart.type === 'treemap') {
|
||||||
|
w.config.grid.show = false
|
||||||
|
w.config.yaxis[0].show = false
|
||||||
|
}
|
||||||
|
|
||||||
|
if (gl.svgWidth === 0) {
|
||||||
|
// if the element is hidden, skip drawing
|
||||||
|
gl.animationEnded = true
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
const combo = CoreUtils.checkComboSeries(ser)
|
||||||
|
gl.comboCharts = combo.comboCharts
|
||||||
|
gl.comboBarCount = combo.comboBarCount
|
||||||
|
|
||||||
|
const allSeriesAreEmpty = ser.every((s) => s.data && s.data.length === 0)
|
||||||
|
|
||||||
|
if (ser.length === 0 || allSeriesAreEmpty) {
|
||||||
|
this.series.handleNoData()
|
||||||
|
}
|
||||||
|
|
||||||
|
this.events.setupEventHandlers()
|
||||||
|
|
||||||
|
// Handle the data inputted by user and set some of the global variables (for eg, if data is datetime / numeric / category). Don't calculate the range / min / max at this time
|
||||||
|
this.data.parseData(ser)
|
||||||
|
|
||||||
|
// this is a good time to set theme colors first
|
||||||
|
this.theme.init()
|
||||||
|
|
||||||
|
// as markers accepts array, we need to setup global markers for easier access
|
||||||
|
const markers = new Markers(this)
|
||||||
|
markers.setGlobalMarkerSize()
|
||||||
|
|
||||||
|
// labelFormatters should be called before dimensions as in dimensions we need text labels width
|
||||||
|
this.formatters.setLabelFormatters()
|
||||||
|
this.titleSubtitle.draw()
|
||||||
|
|
||||||
|
// legend is calculated here before coreCalculations because it affects the plottable area
|
||||||
|
// if there is some data to show or user collapsed all series, then proceed drawing legend
|
||||||
|
if (
|
||||||
|
!gl.noData ||
|
||||||
|
gl.collapsedSeries.length === gl.series.length ||
|
||||||
|
w.config.legend.showForSingleSeries
|
||||||
|
) {
|
||||||
|
this.legend.init()
|
||||||
|
}
|
||||||
|
|
||||||
|
// check whether in multiple series, all series share the same X
|
||||||
|
this.series.hasAllSeriesEqualX()
|
||||||
|
|
||||||
|
// coreCalculations will give the min/max range and yaxis/axis values. It should be called here to set series variable from config to globals
|
||||||
|
if (gl.axisCharts) {
|
||||||
|
this.core.coreCalculations()
|
||||||
|
if (w.config.xaxis.type !== 'category') {
|
||||||
|
// as we have minX and maxX values, determine the default DateTimeFormat for time series
|
||||||
|
this.formatters.setLabelFormatters()
|
||||||
|
}
|
||||||
|
this.ctx.toolbar.minX = w.globals.minX
|
||||||
|
this.ctx.toolbar.maxX = w.globals.maxX
|
||||||
|
}
|
||||||
|
|
||||||
|
// we need to generate yaxis for heatmap separately as we are not showing numerics there, but seriesNames. There are some tweaks which are required for heatmap to align labels correctly which are done in below function
|
||||||
|
// Also we need to do this before calculating Dimensions plotCoords() method of Dimensions
|
||||||
|
this.formatters.heatmapLabelFormatters()
|
||||||
|
|
||||||
|
// get the largest marker size which will be needed in dimensions calc
|
||||||
|
const coreUtils = new CoreUtils(this)
|
||||||
|
coreUtils.getLargestMarkerSize()
|
||||||
|
|
||||||
|
// We got plottable area here, next task would be to calculate axis areas
|
||||||
|
this.dimensions.plotCoords()
|
||||||
|
|
||||||
|
const xyRatios = this.core.xySettings()
|
||||||
|
|
||||||
|
this.grid.createGridMask()
|
||||||
|
|
||||||
|
const elGraph = this.core.plotChartType(ser, xyRatios)
|
||||||
|
|
||||||
|
const dataLabels = new DataLabels(this)
|
||||||
|
dataLabels.bringForward()
|
||||||
|
if (w.config.dataLabels.background.enabled) {
|
||||||
|
dataLabels.dataLabelsBackground()
|
||||||
|
}
|
||||||
|
|
||||||
|
// after all the drawing calculations, shift the graphical area (actual charts/bars) excluding legends
|
||||||
|
this.core.shiftGraphPosition()
|
||||||
|
|
||||||
|
const dim = {
|
||||||
|
plot: {
|
||||||
|
left: w.globals.translateX,
|
||||||
|
top: w.globals.translateY,
|
||||||
|
width: w.globals.gridWidth,
|
||||||
|
height: w.globals.gridHeight,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
elGraph,
|
||||||
|
xyRatios,
|
||||||
|
dimensions: dim,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
mount(graphData = null) {
|
||||||
|
let me = this
|
||||||
|
let w = me.w
|
||||||
|
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
// no data to display
|
||||||
|
if (me.el === null) {
|
||||||
|
return reject(
|
||||||
|
new Error('Not enough data to display or target element not found')
|
||||||
|
)
|
||||||
|
} else if (graphData === null || w.globals.allSeriesCollapsed) {
|
||||||
|
me.series.handleNoData()
|
||||||
|
}
|
||||||
|
|
||||||
|
me.grid = new Grid(me)
|
||||||
|
let elgrid = me.grid.drawGrid()
|
||||||
|
|
||||||
|
me.annotations = new Annotations(me)
|
||||||
|
me.annotations.drawImageAnnos()
|
||||||
|
me.annotations.drawTextAnnos()
|
||||||
|
|
||||||
|
if (w.config.grid.position === 'back') {
|
||||||
|
if (elgrid) {
|
||||||
|
w.globals.dom.elGraphical.add(elgrid.el)
|
||||||
|
}
|
||||||
|
if (elgrid?.elGridBorders?.node) {
|
||||||
|
w.globals.dom.elGraphical.add(elgrid.elGridBorders)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (Array.isArray(graphData.elGraph)) {
|
||||||
|
for (let g = 0; g < graphData.elGraph.length; g++) {
|
||||||
|
w.globals.dom.elGraphical.add(graphData.elGraph[g])
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
w.globals.dom.elGraphical.add(graphData.elGraph)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (w.config.grid.position === 'front') {
|
||||||
|
if (elgrid) {
|
||||||
|
w.globals.dom.elGraphical.add(elgrid.el)
|
||||||
|
}
|
||||||
|
if (elgrid?.elGridBorders?.node) {
|
||||||
|
w.globals.dom.elGraphical.add(elgrid.elGridBorders)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (w.config.xaxis.crosshairs.position === 'front') {
|
||||||
|
me.crosshairs.drawXCrosshairs()
|
||||||
|
}
|
||||||
|
|
||||||
|
if (w.config.yaxis[0].crosshairs.position === 'front') {
|
||||||
|
me.crosshairs.drawYCrosshairs()
|
||||||
|
}
|
||||||
|
|
||||||
|
if (w.config.chart.type !== 'treemap') {
|
||||||
|
me.axes.drawAxis(w.config.chart.type, elgrid)
|
||||||
|
}
|
||||||
|
|
||||||
|
let xAxis = new XAxis(this.ctx, elgrid)
|
||||||
|
let yaxis = new YAxis(this.ctx, elgrid)
|
||||||
|
if (elgrid !== null) {
|
||||||
|
xAxis.xAxisLabelCorrections(elgrid.xAxisTickWidth)
|
||||||
|
yaxis.setYAxisTextAlignments()
|
||||||
|
|
||||||
|
w.config.yaxis.map((yaxe, index) => {
|
||||||
|
if (w.globals.ignoreYAxisIndexes.indexOf(index) === -1) {
|
||||||
|
yaxis.yAxisTitleRotate(index, yaxe.opposite)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
me.annotations.drawAxesAnnotations()
|
||||||
|
|
||||||
|
if (!w.globals.noData) {
|
||||||
|
// draw tooltips at the end
|
||||||
|
if (w.config.tooltip.enabled && !w.globals.noData) {
|
||||||
|
me.w.globals.tooltip.drawTooltip(graphData.xyRatios)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
w.globals.axisCharts &&
|
||||||
|
(w.globals.isXNumeric ||
|
||||||
|
w.config.xaxis.convertedCatToNumeric ||
|
||||||
|
w.globals.isRangeBar)
|
||||||
|
) {
|
||||||
|
if (
|
||||||
|
w.config.chart.zoom.enabled ||
|
||||||
|
(w.config.chart.selection && w.config.chart.selection.enabled) ||
|
||||||
|
(w.config.chart.pan && w.config.chart.pan.enabled)
|
||||||
|
) {
|
||||||
|
me.zoomPanSelection.init({
|
||||||
|
xyRatios: graphData.xyRatios,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
const tools = w.config.chart.toolbar.tools
|
||||||
|
let toolsArr = [
|
||||||
|
'zoom',
|
||||||
|
'zoomin',
|
||||||
|
'zoomout',
|
||||||
|
'selection',
|
||||||
|
'pan',
|
||||||
|
'reset',
|
||||||
|
]
|
||||||
|
toolsArr.forEach((t) => {
|
||||||
|
tools[t] = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
if (w.config.chart.toolbar.show && !w.globals.allSeriesCollapsed) {
|
||||||
|
me.toolbar.createToolbar()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (w.globals.memory.methodsToExec.length > 0) {
|
||||||
|
w.globals.memory.methodsToExec.forEach((fn) => {
|
||||||
|
fn.method(fn.params, false, fn.context)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!w.globals.axisCharts && !w.globals.noData) {
|
||||||
|
me.core.resizeNonAxisCharts()
|
||||||
|
}
|
||||||
|
resolve(me)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Destroy the chart instance by removing all elements which also clean up event listeners on those elements.
|
||||||
|
*/
|
||||||
|
destroy() {
|
||||||
|
window.removeEventListener('resize', this.windowResizeHandler)
|
||||||
|
|
||||||
|
removeResizeListener(this.el.parentNode, this.parentResizeHandler)
|
||||||
|
// remove the chart's instance from the global Apex._chartInstances
|
||||||
|
const chartID = this.w.config.chart.id
|
||||||
|
if (chartID) {
|
||||||
|
Apex._chartInstances.forEach((c, i) => {
|
||||||
|
if (c.id === Utils.escapeString(chartID)) {
|
||||||
|
Apex._chartInstances.splice(i, 1)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
new Destroy(this.ctx).clear({ isUpdating: false })
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Allows users to update Options after the chart has rendered.
|
||||||
|
*
|
||||||
|
* @param {object} options - A new config object can be passed which will be merged with the existing config object
|
||||||
|
* @param {boolean} redraw - should redraw from beginning or should use existing paths and redraw from there
|
||||||
|
* @param {boolean} animate - should animate or not on updating Options
|
||||||
|
*/
|
||||||
|
updateOptions(
|
||||||
|
options,
|
||||||
|
redraw = false,
|
||||||
|
animate = true,
|
||||||
|
updateSyncedCharts = true,
|
||||||
|
overwriteInitialConfig = true
|
||||||
|
) {
|
||||||
|
const w = this.w
|
||||||
|
|
||||||
|
// when called externally, clear some global variables
|
||||||
|
// fixes apexcharts.js#1488
|
||||||
|
w.globals.selection = undefined
|
||||||
|
|
||||||
|
if (options.series) {
|
||||||
|
this.series.resetSeries(false, true, false)
|
||||||
|
if (options.series.length && options.series[0].data) {
|
||||||
|
options.series = options.series.map((s, i) => {
|
||||||
|
return this.updateHelpers._extendSeries(s, i)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// user updated the series via updateOptions() function.
|
||||||
|
// Hence, we need to reset axis min/max to avoid zooming issues
|
||||||
|
this.updateHelpers.revertDefaultAxisMinMax()
|
||||||
|
}
|
||||||
|
// user has set x-axis min/max externally - hence we need to forcefully set the xaxis min/max
|
||||||
|
if (options.xaxis) {
|
||||||
|
options = this.updateHelpers.forceXAxisUpdate(options)
|
||||||
|
}
|
||||||
|
if (options.yaxis) {
|
||||||
|
options = this.updateHelpers.forceYAxisUpdate(options)
|
||||||
|
}
|
||||||
|
if (w.globals.collapsedSeriesIndices.length > 0) {
|
||||||
|
this.series.clearPreviousPaths()
|
||||||
|
}
|
||||||
|
/* update theme mode#459 */
|
||||||
|
if (options.theme) {
|
||||||
|
options = this.theme.updateThemeOptions(options)
|
||||||
|
}
|
||||||
|
return this.updateHelpers._updateOptions(
|
||||||
|
options,
|
||||||
|
redraw,
|
||||||
|
animate,
|
||||||
|
updateSyncedCharts,
|
||||||
|
overwriteInitialConfig
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Allows users to update Series after the chart has rendered.
|
||||||
|
*
|
||||||
|
* @param {array} series - New series which will override the existing
|
||||||
|
*/
|
||||||
|
updateSeries(newSeries = [], animate = true, overwriteInitialSeries = true) {
|
||||||
|
this.series.resetSeries(false)
|
||||||
|
this.updateHelpers.revertDefaultAxisMinMax()
|
||||||
|
return this.updateHelpers._updateSeries(
|
||||||
|
newSeries,
|
||||||
|
animate,
|
||||||
|
overwriteInitialSeries
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Allows users to append a new series after the chart has rendered.
|
||||||
|
*
|
||||||
|
* @param {array} newSerie - New serie which will be appended to the existing series
|
||||||
|
*/
|
||||||
|
appendSeries(newSerie, animate = true, overwriteInitialSeries = true) {
|
||||||
|
const newSeries = this.w.config.series.slice()
|
||||||
|
newSeries.push(newSerie)
|
||||||
|
this.series.resetSeries(false)
|
||||||
|
this.updateHelpers.revertDefaultAxisMinMax()
|
||||||
|
return this.updateHelpers._updateSeries(
|
||||||
|
newSeries,
|
||||||
|
animate,
|
||||||
|
overwriteInitialSeries
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Allows users to append Data to series.
|
||||||
|
*
|
||||||
|
* @param {array} newData - New data in the same format as series
|
||||||
|
*/
|
||||||
|
appendData(newData, overwriteInitialSeries = true) {
|
||||||
|
let me = this
|
||||||
|
|
||||||
|
me.w.globals.dataChanged = true
|
||||||
|
|
||||||
|
me.series.getPreviousPaths()
|
||||||
|
|
||||||
|
let newSeries = me.w.config.series.slice()
|
||||||
|
|
||||||
|
for (let i = 0; i < newSeries.length; i++) {
|
||||||
|
if (newData[i] !== null && typeof newData[i] !== 'undefined') {
|
||||||
|
for (let j = 0; j < newData[i].data.length; j++) {
|
||||||
|
newSeries[i].data.push(newData[i].data[j])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
me.w.config.series = newSeries
|
||||||
|
if (overwriteInitialSeries) {
|
||||||
|
me.w.globals.initialSeries = Utils.clone(me.w.config.series)
|
||||||
|
}
|
||||||
|
|
||||||
|
return this.update()
|
||||||
|
}
|
||||||
|
|
||||||
|
update(options) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
new Destroy(this.ctx).clear({ isUpdating: true })
|
||||||
|
|
||||||
|
const graphData = this.create(this.w.config.series, options)
|
||||||
|
if (!graphData) return resolve(this)
|
||||||
|
this.mount(graphData)
|
||||||
|
.then(() => {
|
||||||
|
if (typeof this.w.config.chart.events.updated === 'function') {
|
||||||
|
this.w.config.chart.events.updated(this, this.w)
|
||||||
|
}
|
||||||
|
this.events.fireEvent('updated', [this, this.w])
|
||||||
|
|
||||||
|
this.w.globals.isDirty = true
|
||||||
|
|
||||||
|
resolve(this)
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
reject(e)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get all charts in the same "group" (including the instance which is called upon) to sync them when user zooms in/out or pan.
|
||||||
|
*/
|
||||||
|
getSyncedCharts() {
|
||||||
|
const chartGroups = this.getGroupedCharts()
|
||||||
|
let allCharts = [this]
|
||||||
|
if (chartGroups.length) {
|
||||||
|
allCharts = []
|
||||||
|
chartGroups.forEach((ch) => {
|
||||||
|
allCharts.push(ch)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return allCharts
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get charts in the same "group" (excluding the instance which is called upon) to perform operations on the other charts of the same group (eg., tooltip hovering)
|
||||||
|
*/
|
||||||
|
getGroupedCharts() {
|
||||||
|
return Apex._chartInstances
|
||||||
|
.filter((ch) => {
|
||||||
|
if (ch.group) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.map((ch) => (this.w.config.chart.group === ch.group ? ch.chart : this))
|
||||||
|
}
|
||||||
|
|
||||||
|
static getChartByID(id) {
|
||||||
|
const chartId = Utils.escapeString(id)
|
||||||
|
if (!Apex._chartInstances) return undefined
|
||||||
|
|
||||||
|
const c = Apex._chartInstances.filter((ch) => ch.id === chartId)[0]
|
||||||
|
return c && c.chart
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Allows the user to provide data attrs in the element and the chart will render automatically when this method is called by searching for the elements containing 'data-apexcharts' attribute
|
||||||
|
*/
|
||||||
|
static initOnLoad() {
|
||||||
|
const els = document.querySelectorAll('[data-apexcharts]')
|
||||||
|
|
||||||
|
for (let i = 0; i < els.length; i++) {
|
||||||
|
const el = els[i]
|
||||||
|
const options = JSON.parse(els[i].getAttribute('data-options'))
|
||||||
|
const apexChart = new ApexCharts(el, options)
|
||||||
|
apexChart.render()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* This static method allows users to call chart methods without necessarily from the
|
||||||
|
* instance of the chart in case user has assigned chartID to the targeted chart.
|
||||||
|
* The chartID is used for mapping the instance stored in Apex._chartInstances global variable
|
||||||
|
*
|
||||||
|
* This is helpful in cases when you don't have reference of the chart instance
|
||||||
|
* easily and need to call the method from anywhere.
|
||||||
|
* For eg, in React/Vue applications when you have many parent/child components,
|
||||||
|
* and need easy reference to other charts for performing dynamic operations
|
||||||
|
*
|
||||||
|
* @param {string} chartID - The unique identifier which will be used to call methods
|
||||||
|
* on that chart instance
|
||||||
|
* @param {function} fn - The method name to call
|
||||||
|
* @param {object} opts - The parameters which are accepted in the original method will be passed here in the same order.
|
||||||
|
*/
|
||||||
|
static exec(chartID, fn, ...opts) {
|
||||||
|
const chart = this.getChartByID(chartID)
|
||||||
|
if (!chart) return
|
||||||
|
|
||||||
|
// turn on the global exec flag to indicate this method was called
|
||||||
|
chart.w.globals.isExecCalled = true
|
||||||
|
|
||||||
|
let ret = null
|
||||||
|
if (chart.publicMethods.indexOf(fn) !== -1) {
|
||||||
|
ret = chart[fn](...opts)
|
||||||
|
}
|
||||||
|
return ret
|
||||||
|
}
|
||||||
|
|
||||||
|
static merge(target, source) {
|
||||||
|
return Utils.extend(target, source)
|
||||||
|
}
|
||||||
|
|
||||||
|
toggleSeries(seriesName) {
|
||||||
|
return this.series.toggleSeries(seriesName)
|
||||||
|
}
|
||||||
|
|
||||||
|
highlightSeriesOnLegendHover(e, targetElement) {
|
||||||
|
return this.series.toggleSeriesOnHover(e, targetElement)
|
||||||
|
}
|
||||||
|
|
||||||
|
showSeries(seriesName) {
|
||||||
|
this.series.showSeries(seriesName)
|
||||||
|
}
|
||||||
|
|
||||||
|
hideSeries(seriesName) {
|
||||||
|
this.series.hideSeries(seriesName)
|
||||||
|
}
|
||||||
|
|
||||||
|
isSeriesHidden(seriesName) {
|
||||||
|
this.series.isSeriesHidden(seriesName);
|
||||||
|
}
|
||||||
|
|
||||||
|
resetSeries(shouldUpdateChart = true, shouldResetZoom = true) {
|
||||||
|
this.series.resetSeries(shouldUpdateChart, shouldResetZoom)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public method to add event listener on chart context
|
||||||
|
addEventListener(name, handler) {
|
||||||
|
this.events.addEventListener(name, handler)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public method to remove event listener on chart context
|
||||||
|
removeEventListener(name, handler) {
|
||||||
|
this.events.removeEventListener(name, handler)
|
||||||
|
}
|
||||||
|
|
||||||
|
addXaxisAnnotation(opts, pushToMemory = true, context = undefined) {
|
||||||
|
let me = this
|
||||||
|
if (context) {
|
||||||
|
me = context
|
||||||
|
}
|
||||||
|
me.annotations.addXaxisAnnotationExternal(opts, pushToMemory, me)
|
||||||
|
}
|
||||||
|
|
||||||
|
addYaxisAnnotation(opts, pushToMemory = true, context = undefined) {
|
||||||
|
let me = this
|
||||||
|
if (context) {
|
||||||
|
me = context
|
||||||
|
}
|
||||||
|
me.annotations.addYaxisAnnotationExternal(opts, pushToMemory, me)
|
||||||
|
}
|
||||||
|
|
||||||
|
addPointAnnotation(opts, pushToMemory = true, context = undefined) {
|
||||||
|
let me = this
|
||||||
|
if (context) {
|
||||||
|
me = context
|
||||||
|
}
|
||||||
|
me.annotations.addPointAnnotationExternal(opts, pushToMemory, me)
|
||||||
|
}
|
||||||
|
|
||||||
|
clearAnnotations(context = undefined) {
|
||||||
|
let me = this
|
||||||
|
if (context) {
|
||||||
|
me = context
|
||||||
|
}
|
||||||
|
me.annotations.clearAnnotations(me)
|
||||||
|
}
|
||||||
|
|
||||||
|
removeAnnotation(id, context = undefined) {
|
||||||
|
let me = this
|
||||||
|
if (context) {
|
||||||
|
me = context
|
||||||
|
}
|
||||||
|
me.annotations.removeAnnotation(me, id)
|
||||||
|
}
|
||||||
|
|
||||||
|
getChartArea() {
|
||||||
|
const el = this.w.globals.dom.baseEl.querySelector('.apexcharts-inner')
|
||||||
|
|
||||||
|
return el
|
||||||
|
}
|
||||||
|
|
||||||
|
getSeriesTotalXRange(minX, maxX) {
|
||||||
|
return this.coreUtils.getSeriesTotalsXRange(minX, maxX)
|
||||||
|
}
|
||||||
|
|
||||||
|
getHighestValueInSeries(seriesIndex = 0) {
|
||||||
|
const range = new Range(this.ctx)
|
||||||
|
return range.getMinYMaxY(seriesIndex).highestY
|
||||||
|
}
|
||||||
|
|
||||||
|
getLowestValueInSeries(seriesIndex = 0) {
|
||||||
|
const range = new Range(this.ctx)
|
||||||
|
return range.getMinYMaxY(seriesIndex).lowestY
|
||||||
|
}
|
||||||
|
|
||||||
|
getSeriesTotal() {
|
||||||
|
return this.w.globals.seriesTotals
|
||||||
|
}
|
||||||
|
|
||||||
|
toggleDataPointSelection(seriesIndex, dataPointIndex) {
|
||||||
|
return this.updateHelpers.toggleDataPointSelection(
|
||||||
|
seriesIndex,
|
||||||
|
dataPointIndex
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
zoomX(min, max) {
|
||||||
|
this.ctx.toolbar.zoomUpdateOptions(min, max)
|
||||||
|
}
|
||||||
|
|
||||||
|
setLocale(localeName) {
|
||||||
|
this.localization.setCurrentLocaleValues(localeName)
|
||||||
|
}
|
||||||
|
|
||||||
|
dataURI(options) {
|
||||||
|
const exp = new Exports(this.ctx)
|
||||||
|
return exp.dataURI(options)
|
||||||
|
}
|
||||||
|
|
||||||
|
exportToCSV(options = {}) {
|
||||||
|
const exp = new Exports(this.ctx)
|
||||||
|
return exp.exportToCSV(options)
|
||||||
|
}
|
||||||
|
|
||||||
|
paper() {
|
||||||
|
return this.w.globals.dom.Paper
|
||||||
|
}
|
||||||
|
|
||||||
|
_parentResizeCallback() {
|
||||||
|
if (
|
||||||
|
this.w.globals.animationEnded &&
|
||||||
|
this.w.config.chart.redrawOnParentResize
|
||||||
|
) {
|
||||||
|
this._windowResize()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handle window resize and re-draw the whole chart.
|
||||||
|
*/
|
||||||
|
_windowResize() {
|
||||||
|
clearTimeout(this.w.globals.resizeTimer)
|
||||||
|
this.w.globals.resizeTimer = window.setTimeout(() => {
|
||||||
|
this.w.globals.resized = true
|
||||||
|
this.w.globals.dataChanged = false
|
||||||
|
|
||||||
|
// we need to redraw the whole chart on window resize (with a small delay).
|
||||||
|
this.ctx.update()
|
||||||
|
}, 150)
|
||||||
|
}
|
||||||
|
|
||||||
|
_windowResizeHandler() {
|
||||||
|
let { redrawOnWindowResize: redraw } = this.w.config.chart
|
||||||
|
|
||||||
|
if (typeof redraw === 'function') {
|
||||||
|
redraw = redraw()
|
||||||
|
}
|
||||||
|
|
||||||
|
redraw && this._windowResize()
|
||||||
|
}
|
||||||
|
}
|
||||||
+601
@@ -0,0 +1,601 @@
|
|||||||
|
@keyframes opaque {
|
||||||
|
0% {
|
||||||
|
opacity: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
opacity: 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes resizeanim {
|
||||||
|
0%,to {
|
||||||
|
opacity: 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-canvas {
|
||||||
|
position: relative;
|
||||||
|
user-select: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-canvas ::-webkit-scrollbar {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
width: 6px
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-canvas ::-webkit-scrollbar-thumb {
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: rgba(0,0,0,.5);
|
||||||
|
box-shadow: 0 0 1px rgba(255,255,255,.5);
|
||||||
|
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5)
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-inner {
|
||||||
|
position: relative
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-text tspan {
|
||||||
|
font-family: inherit
|
||||||
|
}
|
||||||
|
|
||||||
|
.legend-mouseover-inactive {
|
||||||
|
transition: .15s ease all;
|
||||||
|
opacity: .2
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-legend-text {
|
||||||
|
padding-left: 15px;
|
||||||
|
margin-left: -15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-series-collapsed {
|
||||||
|
opacity: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip {
|
||||||
|
border-radius: 5px;
|
||||||
|
box-shadow: 2px 2px 6px -4px #999;
|
||||||
|
cursor: default;
|
||||||
|
font-size: 14px;
|
||||||
|
left: 62px;
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
z-index: 12;
|
||||||
|
transition: .15s ease all
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip.apexcharts-active {
|
||||||
|
opacity: 1;
|
||||||
|
transition: .15s ease all
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip.apexcharts-theme-light {
|
||||||
|
border: 1px solid #e3e3e3;
|
||||||
|
background: rgba(255,255,255,.96)
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip.apexcharts-theme-dark {
|
||||||
|
color: #fff;
|
||||||
|
background: rgba(30,30,30,.8)
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip * {
|
||||||
|
font-family: inherit
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip-title {
|
||||||
|
padding: 6px;
|
||||||
|
font-size: 15px;
|
||||||
|
margin-bottom: 4px
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
|
||||||
|
background: #eceff1;
|
||||||
|
border-bottom: 1px solid #ddd
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip.apexcharts-theme-dark .apexcharts-tooltip-title {
|
||||||
|
background: rgba(0,0,0,.7);
|
||||||
|
border-bottom: 1px solid #333
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip-text-goals-value,.apexcharts-tooltip-text-y-value,.apexcharts-tooltip-text-z-value {
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 5px;
|
||||||
|
font-weight: 600
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip-text-goals-label:empty,.apexcharts-tooltip-text-goals-value:empty,.apexcharts-tooltip-text-y-label:empty,.apexcharts-tooltip-text-y-value:empty,.apexcharts-tooltip-text-z-value:empty,.apexcharts-tooltip-title:empty {
|
||||||
|
display: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip-text-goals-label,.apexcharts-tooltip-text-goals-value {
|
||||||
|
padding: 6px 0 5px
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip-goals-group,.apexcharts-tooltip-text-goals-label,.apexcharts-tooltip-text-goals-value {
|
||||||
|
display: flex
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip-text-goals-label:not(:empty),.apexcharts-tooltip-text-goals-value:not(:empty) {
|
||||||
|
margin-top: -6px
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip-marker {
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
position: relative;
|
||||||
|
top: 0;
|
||||||
|
margin-right: 10px;
|
||||||
|
border-radius: 50%
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip-series-group {
|
||||||
|
padding: 0 10px;
|
||||||
|
display: none;
|
||||||
|
text-align: left;
|
||||||
|
justify-content: left;
|
||||||
|
align-items: center
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip-series-group.apexcharts-active .apexcharts-tooltip-marker {
|
||||||
|
opacity: 1
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip-series-group.apexcharts-active,.apexcharts-tooltip-series-group:last-child {
|
||||||
|
padding-bottom: 4px
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip-series-group-hidden {
|
||||||
|
opacity: 0;
|
||||||
|
height: 0;
|
||||||
|
line-height: 0;
|
||||||
|
padding: 0!important
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip-y-group {
|
||||||
|
padding: 6px 0 5px
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-custom-tooltip,.apexcharts-tooltip-box {
|
||||||
|
padding: 4px 8px
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip-boxPlot {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column-reverse
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip-box>div {
|
||||||
|
margin: 4px 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip-box span.value {
|
||||||
|
font-weight: 700
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip-rangebar {
|
||||||
|
padding: 5px 8px
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip-rangebar .category {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #777
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip-rangebar .series-name {
|
||||||
|
font-weight: 700;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 5px
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-xaxistooltip,.apexcharts-yaxistooltip {
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
color: #373d3f;
|
||||||
|
font-size: 13px;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 2px;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 10;
|
||||||
|
background: #eceff1;
|
||||||
|
border: 1px solid #90a4ae
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-xaxistooltip {
|
||||||
|
padding: 9px 10px;
|
||||||
|
transition: .15s ease all
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-xaxistooltip.apexcharts-theme-dark {
|
||||||
|
background: rgba(0,0,0,.7);
|
||||||
|
border: 1px solid rgba(0,0,0,.5);
|
||||||
|
color: #fff
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-xaxistooltip:after,.apexcharts-xaxistooltip:before {
|
||||||
|
left: 50%;
|
||||||
|
border: solid transparent;
|
||||||
|
content: " ";
|
||||||
|
height: 0;
|
||||||
|
width: 0;
|
||||||
|
position: absolute;
|
||||||
|
pointer-events: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-xaxistooltip:after {
|
||||||
|
border-color: transparent;
|
||||||
|
border-width: 6px;
|
||||||
|
margin-left: -6px
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-xaxistooltip:before {
|
||||||
|
border-color: transparent;
|
||||||
|
border-width: 7px;
|
||||||
|
margin-left: -7px
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-xaxistooltip-bottom:after,.apexcharts-xaxistooltip-bottom:before {
|
||||||
|
bottom: 100%
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-xaxistooltip-top:after,.apexcharts-xaxistooltip-top:before {
|
||||||
|
top: 100%
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-xaxistooltip-bottom:after {
|
||||||
|
border-bottom-color: #eceff1
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-xaxistooltip-bottom:before {
|
||||||
|
border-bottom-color: #90a4ae
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-xaxistooltip-bottom.apexcharts-theme-dark:after,.apexcharts-xaxistooltip-bottom.apexcharts-theme-dark:before {
|
||||||
|
border-bottom-color: rgba(0,0,0,.5)
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-xaxistooltip-top:after {
|
||||||
|
border-top-color: #eceff1
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-xaxistooltip-top:before {
|
||||||
|
border-top-color: #90a4ae
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-xaxistooltip-top.apexcharts-theme-dark:after,.apexcharts-xaxistooltip-top.apexcharts-theme-dark:before {
|
||||||
|
border-top-color: rgba(0,0,0,.5)
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-xaxistooltip.apexcharts-active {
|
||||||
|
opacity: 1;
|
||||||
|
transition: .15s ease all
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-yaxistooltip {
|
||||||
|
padding: 4px 10px
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-yaxistooltip.apexcharts-theme-dark {
|
||||||
|
background: rgba(0,0,0,.7);
|
||||||
|
border: 1px solid rgba(0,0,0,.5);
|
||||||
|
color: #fff
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-yaxistooltip:after,.apexcharts-yaxistooltip:before {
|
||||||
|
top: 50%;
|
||||||
|
border: solid transparent;
|
||||||
|
content: " ";
|
||||||
|
height: 0;
|
||||||
|
width: 0;
|
||||||
|
position: absolute;
|
||||||
|
pointer-events: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-yaxistooltip:after {
|
||||||
|
border-color: transparent;
|
||||||
|
border-width: 6px;
|
||||||
|
margin-top: -6px
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-yaxistooltip:before {
|
||||||
|
border-color: transparent;
|
||||||
|
border-width: 7px;
|
||||||
|
margin-top: -7px
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-yaxistooltip-left:after,.apexcharts-yaxistooltip-left:before {
|
||||||
|
left: 100%
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-yaxistooltip-right:after,.apexcharts-yaxistooltip-right:before {
|
||||||
|
right: 100%
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-yaxistooltip-left:after {
|
||||||
|
border-left-color: #eceff1
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-yaxistooltip-left:before {
|
||||||
|
border-left-color: #90a4ae
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-yaxistooltip-left.apexcharts-theme-dark:after,.apexcharts-yaxistooltip-left.apexcharts-theme-dark:before {
|
||||||
|
border-left-color: rgba(0,0,0,.5)
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-yaxistooltip-right:after {
|
||||||
|
border-right-color: #eceff1
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-yaxistooltip-right:before {
|
||||||
|
border-right-color: #90a4ae
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-yaxistooltip-right.apexcharts-theme-dark:after,.apexcharts-yaxistooltip-right.apexcharts-theme-dark:before {
|
||||||
|
border-right-color: rgba(0,0,0,.5)
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-yaxistooltip.apexcharts-active {
|
||||||
|
opacity: 1
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-yaxistooltip-hidden {
|
||||||
|
display: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-xcrosshairs,.apexcharts-ycrosshairs {
|
||||||
|
pointer-events: none;
|
||||||
|
opacity: 0;
|
||||||
|
transition: .15s ease all
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-xcrosshairs.apexcharts-active,.apexcharts-ycrosshairs.apexcharts-active {
|
||||||
|
opacity: 1;
|
||||||
|
transition: .15s ease all
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-ycrosshairs-hidden {
|
||||||
|
opacity: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-selection-rect {
|
||||||
|
cursor: move
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg_select_boundingRect,.svg_select_points_rot {
|
||||||
|
pointer-events: none;
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-selection-rect+g .svg_select_boundingRect,.apexcharts-selection-rect+g .svg_select_points_rot {
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-selection-rect+g .svg_select_points_l,.apexcharts-selection-rect+g .svg_select_points_r {
|
||||||
|
cursor: ew-resize;
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg_select_points {
|
||||||
|
fill: #efefef;
|
||||||
|
stroke: #333;
|
||||||
|
rx: 2
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-svg.apexcharts-zoomable.hovering-zoom {
|
||||||
|
cursor: crosshair
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-svg.apexcharts-zoomable.hovering-pan {
|
||||||
|
cursor: move
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-menu-icon,.apexcharts-pan-icon,.apexcharts-reset-icon,.apexcharts-selection-icon,.apexcharts-toolbar-custom-icon,.apexcharts-zoom-icon,.apexcharts-zoomin-icon,.apexcharts-zoomout-icon {
|
||||||
|
cursor: pointer;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
line-height: 24px;
|
||||||
|
color: #6e8192;
|
||||||
|
text-align: center
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-menu-icon svg,.apexcharts-reset-icon svg,.apexcharts-zoom-icon svg,.apexcharts-zoomin-icon svg,.apexcharts-zoomout-icon svg {
|
||||||
|
fill: #6e8192
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-selection-icon svg {
|
||||||
|
fill: #444;
|
||||||
|
transform: scale(.76)
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-theme-dark .apexcharts-menu-icon svg,.apexcharts-theme-dark .apexcharts-pan-icon svg,.apexcharts-theme-dark .apexcharts-reset-icon svg,.apexcharts-theme-dark .apexcharts-selection-icon svg,.apexcharts-theme-dark .apexcharts-toolbar-custom-icon svg,.apexcharts-theme-dark .apexcharts-zoom-icon svg,.apexcharts-theme-dark .apexcharts-zoomin-icon svg,.apexcharts-theme-dark .apexcharts-zoomout-icon svg {
|
||||||
|
fill: #f3f4f5
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-canvas .apexcharts-reset-zoom-icon.apexcharts-selected svg,.apexcharts-canvas .apexcharts-selection-icon.apexcharts-selected svg,.apexcharts-canvas .apexcharts-zoom-icon.apexcharts-selected svg {
|
||||||
|
fill: #008ffb
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-theme-light .apexcharts-menu-icon:hover svg,.apexcharts-theme-light .apexcharts-reset-icon:hover svg,.apexcharts-theme-light .apexcharts-selection-icon:not(.apexcharts-selected):hover svg,.apexcharts-theme-light .apexcharts-zoom-icon:not(.apexcharts-selected):hover svg,.apexcharts-theme-light .apexcharts-zoomin-icon:hover svg,.apexcharts-theme-light .apexcharts-zoomout-icon:hover svg {
|
||||||
|
fill: #333
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-menu-icon,.apexcharts-selection-icon {
|
||||||
|
position: relative
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-reset-icon {
|
||||||
|
margin-left: 5px
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-menu-icon,.apexcharts-reset-icon,.apexcharts-zoom-icon {
|
||||||
|
transform: scale(.85)
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-zoomin-icon,.apexcharts-zoomout-icon {
|
||||||
|
transform: scale(.7)
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-zoomout-icon {
|
||||||
|
margin-right: 3px
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-pan-icon {
|
||||||
|
transform: scale(.62);
|
||||||
|
position: relative;
|
||||||
|
left: 1px;
|
||||||
|
top: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-pan-icon svg {
|
||||||
|
fill: #fff;
|
||||||
|
stroke: #6e8192;
|
||||||
|
stroke-width: 2
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-pan-icon.apexcharts-selected svg {
|
||||||
|
stroke: #008ffb
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-pan-icon:not(.apexcharts-selected):hover svg {
|
||||||
|
stroke: #333
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-toolbar {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 11;
|
||||||
|
max-width: 176px;
|
||||||
|
text-align: right;
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 0 6px 2px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-menu {
|
||||||
|
background: #fff;
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 3px;
|
||||||
|
right: 10px;
|
||||||
|
opacity: 0;
|
||||||
|
min-width: 110px;
|
||||||
|
transition: .15s ease all;
|
||||||
|
pointer-events: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-menu.apexcharts-menu-open {
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: all;
|
||||||
|
transition: .15s ease all
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-menu-item {
|
||||||
|
padding: 6px 7px;
|
||||||
|
font-size: 12px;
|
||||||
|
cursor: pointer
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-theme-light .apexcharts-menu-item:hover {
|
||||||
|
background: #eee
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-theme-dark .apexcharts-menu {
|
||||||
|
background: rgba(0,0,0,.7);
|
||||||
|
color: #fff
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width:768px) {
|
||||||
|
.apexcharts-canvas:hover .apexcharts-toolbar {
|
||||||
|
opacity: 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-canvas .apexcharts-element-hidden,.apexcharts-datalabel.apexcharts-element-hidden,.apexcharts-hide .apexcharts-series-points {
|
||||||
|
opacity: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-hidden-element-shown {
|
||||||
|
opacity: 1;
|
||||||
|
transition: 0.25s ease all;
|
||||||
|
}
|
||||||
|
.apexcharts-datalabel,.apexcharts-datalabel-label,.apexcharts-datalabel-value,.apexcharts-datalabels,.apexcharts-pie-label {
|
||||||
|
cursor: default;
|
||||||
|
pointer-events: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-pie-label-delay {
|
||||||
|
opacity: 0;
|
||||||
|
animation-name: opaque;
|
||||||
|
animation-duration: .3s;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
animation-timing-function: ease
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-radialbar-label {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-annotation-rect,.apexcharts-area-series .apexcharts-area,.apexcharts-area-series .apexcharts-series-markers .apexcharts-marker.no-pointer-events,.apexcharts-gridline,.apexcharts-line,.apexcharts-line-series .apexcharts-series-markers .apexcharts-marker.no-pointer-events,.apexcharts-point-annotation-label,.apexcharts-radar-series path,.apexcharts-radar-series polygon,.apexcharts-toolbar svg,.apexcharts-tooltip .apexcharts-marker,.apexcharts-xaxis-annotation-label,.apexcharts-yaxis-annotation-label,.apexcharts-zoom-rect {
|
||||||
|
pointer-events: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-marker {
|
||||||
|
transition: .15s ease all
|
||||||
|
}
|
||||||
|
|
||||||
|
.resize-triggers {
|
||||||
|
animation: 1ms resizeanim;
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden
|
||||||
|
}
|
||||||
|
|
||||||
|
.contract-trigger:before,.resize-triggers,.resize-triggers>div {
|
||||||
|
content: " ";
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.resize-triggers>div {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
background: #eee;
|
||||||
|
overflow: auto
|
||||||
|
}
|
||||||
|
|
||||||
|
.contract-trigger:before {
|
||||||
|
overflow: hidden;
|
||||||
|
width: 200%;
|
||||||
|
height: 200%
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-bar-goals-markers{
|
||||||
|
pointer-events: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-bar-shadows{
|
||||||
|
pointer-events: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-rangebar-goals-markers{
|
||||||
|
pointer-events: none
|
||||||
|
}
|
||||||
+5
@@ -0,0 +1,5 @@
|
|||||||
|
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<circle cx="12" cy="12" r="3.2"/>
|
||||||
|
<path d="M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"/>
|
||||||
|
<path d="M0 0h24v24H0z" fill="none"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 355 B |
+4
@@ -0,0 +1,4 @@
|
|||||||
|
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
|
||||||
|
<path d="M0 0h24v24H0z" fill="none"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 199 B |
+1
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>
|
||||||
|
After Width: | Height: | Size: 185 B |
+9
@@ -0,0 +1,9 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" width="24" height="24">
|
||||||
|
<defs>
|
||||||
|
<path id="a" d="M0 0h24v24H0z"/>
|
||||||
|
</defs>
|
||||||
|
<clipPath id="b">
|
||||||
|
<use xlink:href="#a" overflow="visible"/>
|
||||||
|
</clipPath>
|
||||||
|
<path clip-path="url(#b)" d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 416 B |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user