datastake-daf 0.6.774 → 0.6.775

package/dist/style/datastake/mapbox-gl.css

@@ -0,0 +1,330 @@
+/* Isolated Mapbox GL CSS - Scoped to prevent Leaflet conflicts */
+
+/* Mapbox GL Core Styles - Scoped with .mapbox-gl-scope */
+.mapbox-gl-scope .mapboxgl-map {
+  font: 12px/20px Helvetica Neue, Arial, Helvetica, sans-serif;
+  overflow: hidden;
+  position: relative;
+  -webkit-tap-highlight-color: rgb(0 0 0/0);
+}
+
+.mapbox-gl-scope .mapboxgl-canvas {
+  left: 0;
+  position: absolute;
+  top: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-map:-webkit-full-screen {
+  height: 100%;
+  width: 100%;
+}
+
+.mapbox-gl-scope .mapboxgl-canary {
+  background-color: salmon;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-interactive,
+.mapbox-gl-scope .mapboxgl-ctrl-group button.mapboxgl-ctrl-compass {
+  cursor: grab;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-interactive.mapboxgl-track-pointer {
+  cursor: pointer;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-interactive:active,
+.mapbox-gl-scope .mapboxgl-ctrl-group button.mapboxgl-ctrl-compass:active {
+  cursor: grabbing;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate,
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate .mapboxgl-canvas {
+  touch-action: pan-x pan-y;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-drag-pan,
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-drag-pan .mapboxgl-canvas {
+  touch-action: pinch-zoom;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan,
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan .mapboxgl-canvas {
+  touch-action: none;
+}
+
+/* Control positioning */
+.mapbox-gl-scope .mapboxgl-ctrl-bottom,
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-left,
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-right,
+.mapbox-gl-scope .mapboxgl-ctrl-left,
+.mapbox-gl-scope .mapboxgl-ctrl-right,
+.mapbox-gl-scope .mapboxgl-ctrl-top,
+.mapbox-gl-scope .mapboxgl-ctrl-top-left,
+.mapbox-gl-scope .mapboxgl-ctrl-top-right {
+  pointer-events: none;
+  position: absolute;
+  z-index: 2;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top-left {
+  left: 0;
+  top: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top {
+  left: 50%;
+  top: 0;
+  transform: translateX(-50%);
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top-right {
+  right: 0;
+  top: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-right {
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-right {
+  bottom: 0;
+  right: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom {
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-left {
+  bottom: 0;
+  left: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-left {
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl {
+  clear: both;
+  pointer-events: auto;
+  transform: translate(0);
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top-left .mapboxgl-ctrl {
+  float: left;
+  margin: 10px 0 0 10px;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top .mapboxgl-ctrl {
+  float: left;
+  margin: 10px 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top-right .mapboxgl-ctrl {
+  float: right;
+  margin: 10px 10px 0 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl,
+.mapbox-gl-scope .mapboxgl-ctrl-right .mapboxgl-ctrl {
+  float: right;
+  margin: 0 10px 10px 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom .mapboxgl-ctrl {
+  float: left;
+  margin: 10px 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl,
+.mapbox-gl-scope .mapboxgl-ctrl-left .mapboxgl-ctrl {
+  float: left;
+  margin: 0 0 10px 10px;
+}
+
+/* Control group styling */
+.mapbox-gl-scope .mapboxgl-ctrl-group {
+  background: #fff;
+  border-radius: 4px;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group:not(:empty) {
+  box-shadow: 0 0 0 2px #0000001a;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group button {
+  background-color: initial;
+  border: 0;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: block;
+  height: 29px;
+  outline: none;
+  overflow: hidden;
+  padding: 0;
+  width: 29px;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group button+button {
+  border-top: 1px solid #ddd;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl button .mapboxgl-ctrl-icon {
+  background-position: 50%;
+  background-repeat: no-repeat;
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-attrib-button:focus,
+.mapbox-gl-scope .mapboxgl-ctrl-group button:focus {
+  box-shadow: 0 0 2px 2px #0096ff;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl button:disabled {
+  cursor: not-allowed;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl button:disabled .mapboxgl-ctrl-icon {
+  opacity: .25;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group button:first-child {
+  border-radius: 4px 4px 0 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group button:last-child {
+  border-radius: 0 0 4px 4px;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group button:only-child {
+  border-radius: inherit;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl button:not(:disabled):hover {
+  background-color: #0000000d;
+}
+
+/* Marker styles */
+.mapbox-gl-scope .mapboxgl-marker {
+  position: absolute;
+  z-index: 1;
+}
+
+.mapbox-gl-scope .mapboxgl-marker svg {
+  display: block;
+}
+
+/* Popup styles */
+.mapbox-gl-scope .mapboxgl-popup {
+  position: absolute;
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-content-wrapper {
+  padding: 1px;
+  text-align: left;
+  border-radius: 12px;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-content {
+  margin: 13px 24px 13px 20px;
+  line-height: 1.3;
+  font-size: 13px;
+  min-height: 1px;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-content p {
+  margin: 17px 0;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-tip-container {
+  width: 40px;
+  height: 20px;
+  position: absolute;
+  left: 50%;
+  margin-top: -1px;
+  margin-left: -20px;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-tip {
+  width: 17px;
+  height: 17px;
+  padding: 1px;
+  margin: -10px auto 0;
+  pointer-events: auto;
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+
+.mapbox-gl-scope .mapboxgl-popup-content-wrapper,
+.mapbox-gl-scope .mapboxgl-popup-tip {
+  background: white;
+  color: #333;
+  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
+}
+
+.mapbox-gl-scope .mapboxgl-popup-close-button {
+  position: absolute;
+  top: 0;
+  right: 0;
+  border: none;
+  text-align: center;
+  width: 24px;
+  height: 24px;
+  font: 16px/24px Tahoma, Verdana, sans-serif;
+  color: #757575;
+  text-decoration: none;
+  background: transparent;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-close-button:hover,
+.mapbox-gl-scope .mapboxgl-popup-close-button:focus {
+  color: #585858;
+}
+
+/* Attribution */
+.mapbox-gl-scope .mapboxgl-ctrl-attribution {
+  background: #fff;
+  background: rgba(255, 255, 255, 0.8);
+  margin: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-attribution,
+.mapbox-gl-scope .mapboxgl-ctrl-scale-line {
+  padding: 0 5px;
+  color: #333;
+  line-height: 1.4;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-attribution a {
+  text-decoration: none;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-attribution a:hover,
+.mapbox-gl-scope .mapboxgl-ctrl-attribution a:focus {
+  text-decoration: underline;
+}
+
+/* Hide attribution by default */
+.mapbox-gl-scope .mapboxgl-ctrl-attribution {
+  display: none !important;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-logo {
+  display: none !important;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.774",
+	"version": "0.6.775",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",

package/src/@daf/hooks/useTimeFilter.js

@@ -0,0 +1,56 @@
+import { useState, useMemo, useCallback } from 'react';
+import { getFormatDate, getTimeQuantity, processChartDateData, formatDateAxis } from '../utils/timeFilterUtils.js';
+
+/**
+ * Custom hook for time filtering functionality
+ * Provides state management and formatting functions for time-based charts
+ * 
+ * @param {Object} options - Configuration options
+ * @param {string} options.defaultFilter - Default time filter ('daily', 'weekly', 'monthly')
+ * @returns {Object} Time filter state and utilities
+ */
+export const useTimeFilter = ({ defaultFilter = 'monthly' } = {}) => {
+    const [timeFilter, setTimeFilter] = useState(defaultFilter);
+
+    // Memoized format date function bound to current timeFilter
+    const getFormatDateFn = useCallback(
+        (date, breakLine = false) => getFormatDate(date, breakLine, timeFilter),
+        [timeFilter]
+    );
+
+    // Memoized time quantity function bound to current timeFilter
+    const getTimeQuantityFn = useCallback(
+        () => getTimeQuantity(timeFilter),
+        [timeFilter]
+    );
+
+    // Memoized date axis formatter
+    const formatDateAxisFn = useMemo(
+        () => (label) => formatDateAxis(label, getFormatDateFn),
+        [getFormatDateFn]
+    );
+
+    // Process chart data with current time filter
+    const processData = useCallback(
+        ({ mainData, filters = {}, isCumulative = false, valueField = 'total' }) => {
+            return processChartDateData({
+                mainData,
+                timeFilter,
+                filters,
+                isCumulative,
+                valueField,
+            });
+        },
+        [timeFilter]
+    );
+
+    return {
+        timeFilter,
+        setTimeFilter,
+        getFormatDate: getFormatDateFn,
+        getTimeQuantity: getTimeQuantityFn,
+        formatDateAxis: formatDateAxisFn,
+        processChartDateData: processData,
+    };
+};
+