dsp-semactic 0.4.0 → 0.5.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dsp-semactic",
   "private": false,
-  "version": "0.4.0",
+  "version": "0.5.1",
   "type": "module",
   "main": "dist/vue-design-system.umd.js",
   "module": "dist/vue-design-system.es.js",
@@ -12,7 +12,8 @@
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "src/styles/"
   ],
   "scripts": {
     "dev": "vite",
@@ -36,6 +37,7 @@
     "@vitest/browser": "^3.2.3",
     "@vitest/coverage-v8": "^3.2.3",
     "playwright": "^1.53.0",
+    "sass-embedded": "^1.89.2",
     "storybook": "^9.0.10",
     "vite": "^6.3.5",
     "vitest": "^3.2.3"

package/src/styles/DSSChart.scss

@@ -0,0 +1,1051 @@
+.dss-custom-chart-container {
+    position: relative;
+    font-family: Arial, sans-serif;
+    background: white;
+    border-radius: 8px;
+    overflow: visible;
+    margin: .5rem;
+}
+
+.dss-chart-header{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.dss-chart-title {
+    text-align: left;
+    font-size: 18px;
+    font-weight: bold;
+    color: #333;
+    margin: 15px 0 5px 0;
+    padding: 1rem 0 0 1.5rem;
+}
+
+.dss-chart-subtitle {
+    text-align: left;
+    font-size: 14px;
+    color: #666;
+    margin-bottom: 10px;
+    padding-left: 1.5rem;
+}
+
+.dss-chart-svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+
+.dss-chart-svg.has-watermark {
+    background-image: var(--watermark-url);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: var(--watermark-size, 30%);
+    background-blend-mode: multiply;
+}
+
+.dss-chart-svg.has-watermark::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: var(--watermark-url);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: var(--watermark-size, 30%);
+    opacity: var(--watermark-opacity, 0.05);
+    pointer-events: none;
+    z-index: 1;
+}
+
+.dss-chart-legend {
+    display: flex;
+    justify-content: flex-end;
+    gap: .5rem;
+    padding-right: 1.5rem;
+}
+
+.dss-legend-item {
+	display: flex;
+	align-items: center;
+	gap: .3rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    padding: 4px 8px;
+    border-radius: 4px;
+}
+
+.dss-legend-item.legend-dimmed {
+    opacity: 0.5;
+    transform: none;
+}
+
+.dss-legend-color {
+	width: 12px;
+	height: 12px;
+	border-radius: 50%;
+    transition: transform 0.3s ease;
+}
+
+.dss-legend-item.legend-hovered .dss-legend-color {
+    transform: scale(1.2);
+}
+
+.dss-legend-text {
+	font-size: 14px;
+    transition: font-weight 0.3s ease;
+}
+
+.dss-legend-item.legend-hovered .dss-legend-text {
+    font-weight: 600;
+}
+
+.dss-legend-item.hidden{
+    opacity: 0.5;
+    text-decoration: line-through;
+    filter: none !important;
+    transform: none !important; 
+}
+
+.dss-chart-tooltip {
+    position: absolute;
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+    padding: 8px 12px;
+    border-radius: 4px;
+    font-size: 12px;
+    pointer-events: none;
+    z-index: 9999;
+    min-width: 120px;
+    max-width: 200px;
+    word-wrap: break-word;
+    white-space: nowrap;
+}
+
+.dss-chart-tooltip.dss-crosshair-tooltip {
+    background: rgba(0, 0, 0, 0.9);
+    padding: 10px 14px;
+    min-width: 150px;
+    max-width: 250px;
+    white-space: normal;
+}
+
+.dss-tooltip-title {
+    font-weight: bold;
+    margin-bottom: 6px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+    padding-bottom: 4px;
+}
+
+.dss-tooltip-value {
+	font-size: 11px;
+	opacity: 0.9;
+}
+
+.dss-tooltip-series {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin: 4px 0;
+    font-size: 11px;
+}
+
+.dss-tooltip-series-indicator {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    flex-shrink: 0;
+}
+
+.dss-tooltip-series-name {
+    color: rgba(255, 255, 255, 0.8);
+    flex-shrink: 0;
+}
+
+.dss-tooltip-series-value {
+    font-weight: bold;
+    margin-left: auto;
+}
+
+.dss-crosshair {
+    pointer-events: none;
+}
+
+.dss-crosshair line,
+.dss-crosshair circle {
+    transition: opacity 0.1s ease;
+}
+
+.dss-zoom-indicator {
+    position: absolute;
+    top: 20%;
+    right: 10px;
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+    padding: 8px 12px;
+    border-radius: 4px;
+    font-size: 12px;
+    cursor: pointer;
+    user-select: none;
+    transition: background-color 0.2s ease;
+    z-index: 1000;
+}
+
+.dss-zoom-indicator:hover {
+    background: rgba(0, 0, 0, 0.9);
+}
+
+.dss-chart-svg:hover .dss-chart-data path {
+    transition: opacity 0.2s ease;
+}
+
+.dss-spider-chart .dss-spider-data polygon {
+    cursor: pointer;
+    transition: fill-opacity 0.2s ease;
+}
+
+.dss-spider-chart .dss-spider-data polygon:hover {
+    fill-opacity: 0.3 !important;
+}
+
+.dss-spider-chart .dss-spider-data circle {
+    cursor: pointer;
+    transition: r 0.2s ease;
+}
+
+.dss-spider-chart .dss-spider-data circle:hover {
+    r: 6;
+}
+
+.dss-spider-labels text {
+    user-select: none;
+    font-weight: 500;
+}
+
+.dss-spider-grid {
+    pointer-events: none;
+}
+
+.dss-chart-logos image {
+	border-radius: 50%;
+}
+
+/* Hidden Series Styles */
+.dss-series-hidden {
+    opacity: 0 !important;
+    pointer-events: none !important;
+    filter: none !important;
+    transform: none !important;
+    stroke-width: inherit !important;
+    fill-opacity: 0 !important;
+}
+
+.dss-chart-data .dss-series-hidden,
+.dss-chart-data .dss-point-hidden,
+.dss-chart-data .dss-bar-hidden,
+.dss-radial-data .dss-series-hidden,
+.dss-spider-data .dss-series-hidden,
+.dss-spider-data .dss-point-hidden {
+    opacity: 0 !important;
+    pointer-events: none !important;
+    visibility: hidden !important;
+}
+
+.dss-point-hidden {
+    opacity: 0 !important;
+    pointer-events: none;
+}
+
+.dss-bar-hidden {
+    opacity: 0 !important;
+    pointer-events: none;
+}
+
+/* Hover Effect Styles */
+.dss-series-highlighted {
+    filter: brightness(1.1);
+    opacity: 1 !important;
+    transform: scaleZ(1.1);
+}
+
+.dss-series-dimmed {
+    opacity: 0.3;
+    transition: opacity 0.3s ease;
+}
+
+.dss-point-dimmed {
+    opacity: 0.4;
+    transition: opacity 0.3s ease;
+}
+
+.dss-bar-highlighted {
+    filter: brightness(1.1);
+    transform-origin: center bottom;
+}
+
+.dss-bar-dimmed {
+    opacity: 0.4;
+    transition: opacity 0.3s ease;
+}
+
+/* Chart Animation Styles */
+.dss-custom-chart-container.dss-chart-animated {
+    --dss-animation-duration: 1500ms;
+    --dss-animation-easing: ease-out;
+    --dss-stagger-delay: 200ms;
+    --dss-animation-progress: 0;
+}
+
+.dss-animate-draw .dss-chart-data path[stroke] {
+    stroke-dasharray: var(--dss-path-length, 1000);
+    stroke-dashoffset: var(--dss-path-length, 1000);
+    animation: drawPath var(--dss-animation-duration) var(--dss-animation-easing) forwards;
+}
+
+@keyframes drawPath {
+    to {
+        stroke-dashoffset: 0;
+    }
+}
+
+.dss-animate-draw .dss-chart-data path[stroke]:nth-child(1) { animation-delay: 0ms; }
+.dss-animate-draw .dss-chart-data path[stroke]:nth-child(2) { animation-delay: var(--dss-stagger-delay); }
+.dss-animate-draw .dss-chart-data path[stroke]:nth-child(3) { animation-delay: calc(var(--dss-stagger-delay) * 2); }
+.dss-animate-draw .dss-chart-data path[stroke]:nth-child(4) { animation-delay: calc(var(--dss-stagger-delay) * 3); }
+.dss-animate-draw .dss-chart-data path[stroke]:nth-child(5) { animation-delay: calc(var(--dss-stagger-delay) * 4); }
+
+.dss-animate-fade .dss-chart-data > g > * {
+    opacity: 0;
+    animation: fadeIn var(--dss-animation-duration) var(--dss-animation-easing) forwards;
+}
+
+@keyframes fadeIn {
+    to {
+        opacity: 1;
+    }
+}
+
+.dss-animate-draw .dss-area-line-animated {
+    stroke-dasharray: var(--dss-path-length, 1000);
+    stroke-dashoffset: var(--dss-path-length, 1000);
+    animation: drawPath calc(var(--dss-animation-duration) * 0.8) var(--dss-animation-easing) forwards;
+}
+
+.dss-animate-draw .dss-area-mask-rect {
+    transform: translateX(calc(-1 * var(--dss-mask-width)));
+    animation: smoothFillRight calc(var(--dss-animation-duration) * 1.2) cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
+}
+
+@keyframes smoothFillRight {
+    0% {
+        transform: translateX(calc(-1 * var(--dss-mask-width)));
+    }
+    100% {
+        transform: translateX(0);
+    }
+}
+
+.dss-area-fill-smooth {
+    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
+}
+
+.dss-area-mask-rect {
+    will-change: transform;
+    backface-visibility: hidden;
+    transform-origin: left center;
+}
+
+.dss-animate-fade .dss-chart-data path:nth-child(1) { animation-delay: 0ms; }
+.dss-animate-fade .dss-chart-data path:nth-child(2) { animation-delay: var(--dss-stagger-delay); }
+.dss-animate-fade .dss-chart-data path:nth-child(3) { animation-delay: calc(var(--dss-stagger-delay) * 2); }
+
+.dss-animate-fade .dss-chart-data circle {
+    animation-delay: calc(var(--dss-animation-duration) * 0.6);
+}
+
+.dss-animate-fade .dss-chart-data rect {
+    animation-delay: calc(var(--dss-stagger-delay) * 0.5);
+}
+
+.dss-animate-scale .dss-chart-data > g > * {
+    transform-origin: center;
+    transform: scale(0);
+    animation: scaleUp var(--dss-animation-duration) var(--dss-animation-easing) forwards;
+}
+
+@keyframes scaleUp {
+    to {
+        transform: scale(1);
+    }
+}
+
+.dss-animate-scale .dss-chart-data rect {
+    transform-origin: center bottom;
+    transform: scaleY(0);
+    animation: scaleUpY var(--dss-animation-duration) var(--dss-animation-easing) forwards;
+}
+
+.dss-animate-scale .dss-chart-data rect {
+    transform-box: fill-box;
+    transform-origin: 50% 100%;
+}
+
+.dss-animate-scale .dss-chart-data rect,
+.dss-animate-scale .dss-chart-data path[d*="M"] {
+    transform-box: fill-box;
+    transform-origin: center bottom;
+    transform: scaleY(0);
+    animation: scaleUpBarFromAxis var(--dss-animation-duration) var(--dss-animation-easing) forwards;
+}
+
+@keyframes scaleUpBarFromAxis {
+    from {
+        transform: scaleY(0);
+    }
+    to {
+        transform: scaleY(1);
+    }
+}
+
+.dss-chart-data rect,
+.dss-chart-data path[d*="M"] {
+    transition: opacity 0.2s ease, filter 0.2s ease;
+}
+
+.dss-chart-data rect:hover,
+.dss-chart-data path[d*="M"]:hover {
+    opacity: 0.8;
+    filter: brightness(1.05) drop-shadow(0 2px 6px rgba(0,0,0,0.15));
+}
+
+@keyframes scaleUpY {
+    to {
+        transform: scaleY(1);
+    }
+}
+
+.dss-animate-scale .dss-chart-data rect:nth-child(1) { animation-delay: 0ms; }
+.dss-animate-scale .dss-chart-data rect:nth-child(2) { animation-delay: calc(var(--dss-stagger-delay) * 0.3); }
+.dss-animate-scale .dss-chart-data rect:nth-child(3) { animation-delay: calc(var(--dss-stagger-delay) * 0.6); }
+.dss-animate-scale .dss-chart-data rect:nth-child(4) { animation-delay: calc(var(--dss-stagger-delay) * 0.9); }
+.dss-animate-scale .dss-chart-data rect:nth-child(5) { animation-delay: calc(var(--dss-stagger-delay) * 1.2); }
+
+.dss-animate-draw .dss-radial-data path {
+    stroke-dasharray: 1000;
+    stroke-dashoffset: 1000;
+    animation: drawPath calc(var(--dss-animation-duration) * 0.8) var(--dss-animation-easing) forwards;
+}
+
+.dss-animate-scale .dss-radial-data path {
+    transform-origin: center;
+    transform: scale(0);
+    animation: scaleRotate var(--dss-animation-duration) var(--dss-animation-easing) forwards;
+}
+
+@keyframes scaleRotate {
+    0% {
+        transform: scale(0) rotate(-90deg);
+    }
+    100% {
+        transform: scale(1) rotate(0deg);
+    }
+}
+
+.dss-animate-fade .dss-spider-data polygon {
+    opacity: 0;
+    animation: fadeIn var(--dss-animation-duration) var(--dss-animation-easing) forwards;
+}
+
+.dss-animate-scale .dss-spider-data polygon {
+    transform-origin: center;
+    transform: scale(0);
+    animation: scaleUp calc(var(--dss-animation-duration) * 1.2) var(--dss-animation-easing) forwards;
+}
+
+.dss-animate-draw .dss-spider-data polygon {
+    stroke-dasharray: 2000;
+    stroke-dashoffset: 2000;
+    animation: drawPath calc(var(--dss-animation-duration) * 1.5) var(--dss-animation-easing) forwards;
+}
+
+.dss-animate-fade .dss-axes line,
+.dss-animate-fade .dss-grid-lines line {
+    opacity: 0;
+    animation: fadeIn calc(var(--dss-animation-duration) * 0.6) var(--dss-animation-easing) forwards;
+    animation-delay: calc(var(--dss-animation-duration) * 0.1);
+}
+
+@keyframes scaleUpX {
+    to {
+        transform: scaleX(1);
+    }
+}
+
+.dss-animate-fade .dss-axis-labels text {
+    opacity: 0;
+    animation: fadeIn calc(var(--dss-animation-duration) * 0.4) var(--dss-animation-easing) forwards;
+    animation-delay: calc(var(--dss-animation-duration) * 0.7);
+}
+
+.dss-animate-fade .dss-chart-logos circle,
+.dss-animate-fade .dss-chart-logos image {
+    opacity: 0;
+    animation: fadeIn calc(var(--dss-animation-duration) * 0.6) var(--dss-animation-easing) forwards;
+    animation-delay: calc(var(--dss-animation-duration) * 0.8);
+}
+
+.dss-chart-data circle {
+    transition: r 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
+}
+
+.dss-chart-data circle:hover {
+    r: 6px;
+    filter: brightness(1.1) drop-shadow(0 2px 4px rgba(0,0,0,0.2));
+}
+
+.dss-chart-data rect {
+    transition: opacity 0.2s ease, filter 0.2s ease;
+}
+
+.dss-chart-data rect:hover {
+    opacity: 0.8;
+    filter: brightness(1.05) drop-shadow(0 2px 6px rgba(0,0,0,0.15));
+}
+
+.dss-chart-data path {
+    transition: stroke-width 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .dss-chart-animated * {
+        animation-duration: 0.01ms !important;
+        animation-delay: 0ms !important;
+        transition-duration: 0.01ms !important;
+    }
+}
+
+.dss-chart-animated {
+    will-change: transform, opacity;
+}
+
+.dss-chart-animated .dss-chart-data {
+    transform: translateZ(0);
+    backface-visibility: hidden;
+    perspective: 1000px;
+}
+
+.dss-is-animating {
+    pointer-events: none;
+}
+
+.dss-animation-complete {
+    pointer-events: auto;
+}
+
+.dss-animate-fade .dss-chart-title {
+    opacity: 0;
+    animation: fadeIn calc(var(--dss-animation-duration) * 0.4) var(--dss-animation-easing) forwards;
+    animation-delay: 0ms;
+}
+
+.dss-animate-fade .dss-chart-subtitle {
+    opacity: 0;
+    animation: fadeIn calc(var(--dss-animation-duration) * 0.4) var(--dss-animation-easing) forwards;
+    animation-delay: calc(var(--dss-animation-duration) * 0.1);
+}
+
+.dss-custom-chart-container {
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+
+.dss-custom-chart-container[style*="cursor: grab"] {
+    cursor: grab !important;
+}
+
+.dss-custom-chart-container[style*="cursor: grabbing"] {
+    cursor: grabbing !important;
+}
+
+.dss-custom-chart-container[style*="cursor: grabbing"] * {
+    pointer-events: none;
+}
+
+.dss-chart-svg {
+    transition: none;
+}
+
+.dss-chart-data {
+    transition: transform 0.1s ease-out;
+}
+
+.dss-animate-fill .dss-radial-data path {
+    animation: none;
+}
+
+.dss-animate-fill .dss-radial-data {
+    clip-path: polygon(50% 50%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 50%);
+    animation: radialFillSweep var(--dss-animation-duration) var(--dss-animation-easing) forwards;
+}
+
+@keyframes radialFillSweep {
+    0% {clip-path: polygon(50% 50%, 50% 0%, 50% 0%, 50% 50%);}
+    5% {clip-path: polygon(50% 50%, 50% 0%, 70% 0%, 50% 50%);}
+    10% {clip-path: polygon(50% 50%, 50% 0%, 90% 0%, 50% 50%);}
+    15% {clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 50% 50%);}
+    20% {clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 30%, 50% 50%);}
+    25% {clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%, 50% 50%);}
+    30% {clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 70%, 50% 50%);}
+    35% {clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 90%, 50% 50%);}
+    40% {clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 50% 50%);}
+    45% {clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 70% 100%, 50% 50%);}
+    50% {clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 50% 50%);}
+    55% {clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 30% 100%, 50% 50%);}
+    60% {clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 10% 100%, 50% 50%);}
+    65% {clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 50% 50%);}
+    70% {clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 70%, 50% 50%);}
+    75% {clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 50%, 50% 50%);}
+    80% {clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 30%, 50% 50%);}
+    85% {clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 10%, 50% 50%);}
+    90% {clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 50% 50%);}
+    95% {clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 30% 0%, 50% 50%);}
+    100% {clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 50% 0%, 50% 50%);}
+}
+
+/* Context Menu Styles */
+.dss-chart-context-menu {
+    position: fixed;
+    background: white;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    z-index: 10000;
+    min-width: 180px;
+    overflow: hidden;
+    animation: contextMenuFadeIn 0.15s ease-out;
+    padding: 4px;
+    font-family: Arial, sans-serif;
+}
+
+@keyframes contextMenuFadeIn {
+    from {
+        opacity: 0;
+        transform: scale(0.95) translateY(-5px);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+    }
+}
+
+.dss-context-menu-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 14px;
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+    font-size: 14px;
+    color: #333;
+}
+
+.dss-context-menu-item:hover {
+    background-color: #f5f5f5;
+}
+
+.dss-context-menu-icon {
+    font-size: 14px;
+    width: 16px;
+    display: flex;
+    justify-content: center;
+}
+
+.dss-context-menu-separator {
+    height: 1px;
+    background-color: #e5e5e5;
+    margin: 4px 0;
+}
+
+.dss-custom-menu-content {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+}
+
+.dss-custom-menu-content * {
+    pointer-events: none;
+}
+
+.dss-context-menu-item.dss-custom-styled {
+    padding: 0;
+}
+
+.dss-context-menu-item.dss-custom-styled .dss-custom-menu-content {
+    padding: 8px 12px;
+    width: 100%;
+}
+
+/* Marker Modal Styles */
+.dss-marker-modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10001;
+    animation: modalOverlayFadeIn 0.2s ease-out;
+    font-family: Arial, sans-serif;
+}
+
+@keyframes modalOverlayFadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+.dss-marker-modal {
+    background: white;
+    border-radius: 8px;
+    width: 90%;
+    max-width: 450px;
+    animation: modalSlideIn 0.2s ease-out;
+}
+
+@keyframes modalSlideIn {
+    from {
+        opacity: 0;
+        transform: scale(0.9) translateY(-20px);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+    }
+}
+
+.dss-marker-modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 24px 16px;
+    border-bottom: 1px solid #e5e5e5;
+}
+
+.dss-marker-modal-header h3 {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+    color: #333;
+}
+
+.dss-modal-close-dss-btn {
+    background: none;
+    border: none;
+    font-size: 24px;
+    cursor: pointer;
+    color: #666;
+    padding: 0;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+}
+
+.dss-marker-modal-body {
+    padding: 20px 24px;
+}
+
+.dss-form-group {
+    margin-bottom: 16px;
+}
+
+.dss-form-group:last-child {
+    margin-bottom: 0;
+}
+
+.dss-form-group label {
+    display: block;
+    margin-bottom: 6px;
+    font-weight: 500;
+    color: #333;
+    font-size: 14px;
+}
+
+.dss-form-input,
+.dss-form-textarea {
+    width: 100%;
+    padding: 10px 12px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 14px;
+    transition: border-color 0.15s ease;
+    box-sizing: border-box;
+}
+
+.dss-form-input:focus,
+.dss-form-textarea:focus {
+    outline: none;
+    border-color: hsl(194, 95%, 30%);
+}
+
+.dss-form-textarea {
+    resize: vertical;
+    min-height: 60px;
+    font-family: inherit;
+}
+
+.dss-form-color {
+    width: 40px;
+    height: 40px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    cursor: pointer;
+    padding: 0;
+}
+
+.dss-marker-modal-footer {
+    display: flex;
+    gap: 12px;
+    justify-content: space-between;
+    padding: 16px 24px 20px;
+}
+
+.dss-modal-footer-right{
+    display: flex;
+    gap: .6rem;
+}
+
+.dss-btn {
+    padding: 10px 20px;
+    border: none;
+    border-radius: 4px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    min-width: 80px;
+}
+
+.dss-btn-secondary {
+    background: #f5f5f5;
+    color: #333;
+}
+
+.dss-btn-secondary:hover {
+    background: #e5e5e5;
+}
+
+.dss-btn-primary {
+    background: hsl(42, 100%, 59%);
+    color: black;
+}
+
+.dss-btn-primary:hover:not(:disabled) {
+    background: hsl(42, 100%, 44%);
+}
+
+.dss-btn-primary:disabled {
+    background: hsl(42, 100%, 59%, 0.5);
+    cursor: not-allowed;
+}
+
+/* Markers */
+
+.dss-markers {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 1000;
+}
+
+.dss-marker {
+    transition: all 0.2s ease;
+}
+
+.dss-marker:hover {
+    transform: translate(-50%, -50%) scale(1.2) !important;
+    z-index: 1001;
+}
+
+.dss-marker-icon{
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.dss-btn-danger {
+    background-color: hsl(345, 94%, 44%);
+    color: white;
+    border: 1px solid hsl(345, 94%, 44%);
+    padding: 8px 16px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 14px;
+}
+
+.dss-btn-danger:hover {
+    filter: brightness(0.9);
+}
+
+.dss-custom-chart-container {
+    position: relative;
+    overflow: hidden;
+}
+
+.dss-chart-watermark {
+    mix-blend-mode: multiply;
+    filter: grayscale(50%);
+    background-color: transparent;
+}
+
+.dss-flag-count-indicator {
+    cursor: pointer;
+    transform-origin: center center;
+}
+
+.dss-flag-extension-line {
+    pointer-events: none;
+}
+
+.dss-flag-line {
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.dss-flag-count-text {
+    pointer-events: none;
+    user-select: none;
+}
+
+.dss-flag-type-indicator {
+    pointer-events: none;
+}
+
+.dss-tooltip-section {
+    margin-bottom: 8px;
+}
+
+.dss-tooltip-section:last-child {
+    margin-bottom: 0;
+}
+
+.dss-tooltip-separator {
+    height: 1px;
+    background-color: rgba(255, 255, 255, 0.2);
+    margin: 8px 0;
+}
+
+.dss-tooltip-section-title {
+    font-size: 11px;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.8);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 4px;
+}
+
+.dss-tooltip-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 6px;
+    margin-bottom: 4px;
+    padding: 2px 0;
+}
+
+.dss-tooltip-item:last-child {
+    margin-bottom: 0;
+}
+
+.dss-tooltip-item-indicator {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    flex-shrink: 0;
+}
+
+.dss-tooltip-item-content {
+    flex: 1;
+    min-width: 0;
+}
+
+.dss-tooltip-item-type {
+    font-size: 10px;
+    color: rgba(255, 255, 255, 0.7);
+    text-transform: uppercase;
+    letter-spacing: 0.3px;
+}
+
+.dss-tooltip-item-title {
+    font-size: 12px;
+    font-weight: 500;
+    color: white;
+    line-height: 1.3;
+}
+
+.dss-tooltip-item-text,
+.dss-tooltip-item-description {
+    font-size: 11px;
+    color: rgba(255, 255, 255, 0.9);
+    line-height: 1.3;
+    word-wrap: break-word;
+}
+
+.dss-chart-tooltip {
+    max-width: 250px;
+    min-width: 150px;
+}
+
+.dss-tooltip-group-header {
+    font-weight: 600;
+    font-size: 10px;
+    margin: 10px 0 4px 0;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.dss-tooltip-group-header:first-child {
+    margin-top: 6px;
+}
+
+.dss-tooltip-item-no-indicator {
+    padding-left: 16px;
+}
+
+.dss-radial-labels .dss-label-highlighted text {
+    font-weight: bold;
+    fill-opacity: 1;
+}
+
+.dss-radial-labels .dss-label-dimmed text {
+    fill-opacity: 0.5;
+}
+
+.dss-radial-labels .dss-label-dimmed line {
+    stroke-opacity: 0.3;
+}
+
+.dss-radial-labels text {
+    transition: all 0.3s ease;
+}
+
+.dss-radial-labels line {
+    transition: all 0.3s ease;
+}