fix(charts): set duration charts label to HHhMM for listening time analytics

+ fix stylelint issues

.stylelintrc.json

@@ -14,6 +14,7 @@
         ]
       }
     ],
-    "no-descending-specificity": null
+    "no-descending-specificity": null,
+    "selector-class-pattern": null
   }
 }

app/Resources/js/modules/Charts.ts

@@ -149,7 +149,7 @@ const drawXYDurationChart = (
 
   const yAxis = chart.yAxes.push(new am4charts.DurationAxis());
   yAxis.baseUnit = "second";
-  chart.durationFormatter.durationFormat = "hh'h,' mm'mn'";
+  chart.durationFormatter.durationFormat = "hh'h'mm";
 
   // Add data
   chart.dataSource.url = dataUrl || "";

app/Resources/styles/breadcrumb.css

@@ -4,6 +4,7 @@
 
 .breadcrumb-item + .breadcrumb-item::before {
   @apply inline-block px-1;
+
   color: hsl(var(--color-text-muted));
   content: "/";
 }

app/Resources/styles/choices.css

@@ -1,6 +1,6 @@
-/*===============================
+/* ===============================
 =            Choices            =
-===============================*/
+=============================== */
 
 @layer components {
   .choices {
@@ -21,8 +21,6 @@
   .choices.is-disabled .choices__input {
     opacity: 0.5;
     cursor: not-allowed;
-    -webkit-user-select: none;
-    -ms-user-select: none;
     user-select: none;
   }
 
@@ -71,7 +69,7 @@
   }
 
   .choices[data-type*="select-one"] .choices__button:focus {
-    box-shadow: 0px 0px 0px 2px #00bcd4;
+    box-shadow: 0 0 0 2px #00bcd4;
   }
 
   .choices[data-type*="select-one"]
@@ -80,7 +78,7 @@
     display: none;
   }
 
-  .choices[data-type*="select-one"]:after {
+  .choices[data-type*="select-one"]::after {
     content: "";
     height: 0;
     width: 0;
@@ -95,13 +93,13 @@
     pointer-events: none;
   }
 
-  .choices[data-type*="select-one"].is-open:after {
+  .choices[data-type*="select-one"].is-open::after {
     border-color: transparent transparent hsl(var(--color-text-muted))
       transparent;
     margin-top: -7.5px;
   }
 
-  .choices[data-type*="select-one"][dir="rtl"]:after {
+  .choices[data-type*="select-one"][dir="rtl"]::after {
     left: 11.5px;
     right: auto;
   }
@@ -212,12 +210,13 @@
   }
 
   .is-disabled .choices__list--multiple .choices__item {
-    background-color: #aaaaaa;
+    background-color: #aaa;
     border: 1px solid #919191;
   }
 
   .choices__list--dropdown {
     @apply z-50 border-2 shadow-lg border-contrast;
+
     visibility: hidden;
     position: absolute;
     width: 100%;
@@ -239,6 +238,7 @@
 
   .is-flipped .choices__list--dropdown {
     @apply border-b-0 rounded-t-lg rounded-b-none border-t-3;
+
     top: auto;
     bottom: 100%;
     margin-top: 0;
@@ -263,11 +263,12 @@
     text-align: right;
   }
 
-  @media (min-width: 640px) {
+  @media (width >= 640px) {
     .choices__list--dropdown .choices__item--selectable {
       padding-right: 100px;
     }
-    .choices__list--dropdown .choices__item--selectable:after {
+
+    .choices__list--dropdown .choices__item--selectable::after {
       content: attr(data-select-text);
       font-size: 12px;
       opacity: 0;
@@ -276,12 +277,14 @@
       top: 50%;
       transform: translateY(-50%);
     }
+
     [dir="rtl"] .choices__list--dropdown .choices__item--selectable {
       text-align: right;
       padding-left: 100px;
       padding-right: 10px;
     }
-    [dir="rtl"] .choices__list--dropdown .choices__item--selectable:after {
+
+    [dir="rtl"] .choices__list--dropdown .choices__item--selectable::after {
       right: auto;
       left: 10px;
     }
@@ -291,7 +294,7 @@
     background-color: hsl(var(--color-background-highlight));
   }
 
-  .choices__list--dropdown .choices__item--selectable.is-highlighted:after {
+  .choices__list--dropdown .choices__item--selectable.is-highlighted::after {
     opacity: 0.5;
   }
 
@@ -305,8 +308,6 @@
 
   .choices__item--disabled {
     cursor: not-allowed;
-    -webkit-user-select: none;
-    -ms-user-select: none;
     user-select: none;
     opacity: 0.5;
   }
@@ -321,8 +322,6 @@
 
   .choices__button {
     text-indent: -9999px;
-    -webkit-appearance: none;
-    -moz-appearance: none;
     appearance: none;
     border: 0;
     background-color: transparent;
@@ -349,6 +348,7 @@
 
   .choices__input:focus {
     @apply outline-none;
+
     box-shadow: none;
   }
 
@@ -362,4 +362,4 @@
   }
 }
 
-/*=====  End of Choices  ======*/
+/* =====  End of Choices  ====== */

app/Resources/styles/colorRadioBtn.css

@@ -20,6 +20,7 @@
 
     & + label {
       @apply inline-block w-16 h-16 text-sm font-semibold rounded-full cursor-pointer border-contrast bg-accent-base text-accent-contrast border-3;
+
       color: hsl(var(--color-text-muted));
     }
   }

app/Resources/styles/colors.css

@@ -4,21 +4,17 @@
     --color-accent-hover: 172 100% 17%;
     --color-accent-muted: 131 100% 12%;
     --color-accent-contrast: 0 0% 100%;
-
     --color-heading-foreground: 172 100% 17%;
     --color-heading-background: 111 64% 94%;
-
     --color-background-elevated: 0 0% 100%;
     --color-background-base: 173 44% 96%;
     --color-background-navigation: 172 100% 17%;
     --color-background-header: 172 100% 17%;
     --color-background-highlight: 111 64% 94%;
     --color-background-backdrop: 0 0% 50%;
-
     --color-border-subtle: 111 42% 86%;
     --color-border-contrast: 0 0% 0%;
     --color-border-navigation: 131 100% 12%;
-
     --color-text-base: 158 8% 3%;
     --color-text-muted: 172 8% 38%;
   }

app/Resources/styles/custom.css

@@ -7,6 +7,7 @@
 
   .ring-accent {
     @apply outline-none ring-2 ring-offset-2;
+
     /* FIXME: why doesn't ring-accent-base work? */
     --tw-ring-opacity: 1;
     --tw-ring-color: hsl(var(--color-accent-base) / var(--tw-ring-opacity));
@@ -35,15 +36,15 @@
   .backdrop-gradient {
     background-image: linear-gradient(
       180deg,
-      hsla(0 0% 35.29% / 0) 0%,
+      hsla(0deg 0% 35.29% / 0%) 0%,
-      hsla(0 0% 34.53% / 0.034375) 16.36%,
+      hsla(0deg 0% 34.53% / 3.44%) 16.36%,
-      hsla(0 0% 32.42% / 0.125) 33.34%,
+      hsla(0deg 0% 32.42% / 12.5%) 33.34%,
-      hsla(0 0% 29.18% / 0.253125) 50.1%,
+      hsla(0deg 0% 29.18% / 25.3%) 50.1%,
-      hsla(0 0% 24.96% / 0.4) 65.75%,
+      hsla(0deg 0% 24.96% / 40%) 65.75%,
-      hsla(0 0% 19.85% / 0.546875) 79.43%,
+      hsla(0deg 0% 19.85% / 54.7%) 79.43%,
-      hsla(0 0% 13.95% / 0.675) 90.28%,
+      hsla(0deg 0% 13.95% / 67.5%) 90.28%,
-      hsla(0 0% 7.32% / 0.765625) 97.43%,
+      hsla(0deg 0% 7.32% / 76.6%) 97.43%,
-      hsla(0 0% 0% / 0.8) 100%
+      hsla(0deg 0% 0% / 80%) 100%
     );
   }
 

app/Resources/styles/dropdown.css

@@ -2,6 +2,7 @@
   [data-dropdown="menu"] {
     @apply absolute z-50;
   }
+
   [data-dropdown="menu"]:not([data-show]) {
     @apply hidden;
   }

app/Resources/styles/fonts.css

@@ -19,7 +19,7 @@
 
   /* inter-regular */
   @font-face {
-    font-family: "Inter";
+    font-family: Inter;
     font-style: normal;
     font-weight: 400;
     font-display: swap;
@@ -28,7 +28,7 @@
 
   /* inter-600 */
   @font-face {
-    font-family: "Inter";
+    font-family: Inter;
     font-style: normal;
     font-weight: 600;
     font-display: swap;

app/Resources/styles/formInputTabs.css

@@ -30,6 +30,7 @@
 
   .form-input-tabs > input:checked + label::after {
     @apply absolute inset-x-0 bottom-0 w-full mx-auto bg-accent-base;
+
     content: "";
     height: 0.2rem;
   }

app/Resources/styles/index.css

@@ -1,15 +1,15 @@
-@import "./tailwind.css";
+@import url("./tailwind.css");
-@import "./custom.css";
+@import url("./custom.css");
-@import "./fonts.css";
+@import url("./fonts.css");
-@import "./colors.css";
+@import url("./colors.css");
-@import "./breadcrumb.css";
+@import url("./breadcrumb.css");
-@import "./dropdown.css";
+@import url("./dropdown.css");
-@import "./choices.css";
+@import url("./choices.css");
-@import "./radioBtn.css";
+@import url("./radioBtn.css");
-@import "./colorRadioBtn.css";
+@import url("./colorRadioBtn.css");
-@import "./switch.css";
+@import url("./switch.css");
-@import "./radioToggler.css";
+@import url("./radioToggler.css");
-@import "./formInputTabs.css";
+@import url("./formInputTabs.css");
-@import "./stickyHeader.css";
+@import url("./stickyHeader.css");
-@import "./readMore.css";
+@import url("./readMore.css");
-@import "./seeMore.css";
+@import url("./seeMore.css");

app/Resources/styles/inputRange.css

@@ -6,6 +6,7 @@
   height: 5.25em;
   font: 1em/1 arial, sans-serif;
 }
+
 [type="range"] {
   flex: 1;
   margin: 0;
@@ -14,10 +15,12 @@
   background: transparent;
   font: inherit;
 }
+
 [type="range"],
 [type="range"]::-webkit-slider-thumb {
-  -webkit-appearance: none;
+  appearance: none;
 }
+
 [type="range"]::-webkit-slider-runnable-track {
   box-sizing: border-box;
   border: none;
@@ -25,6 +28,7 @@
   height: 0.25em;
   background: #ccc;
 }
+
 [type="range"]::-moz-range-track {
   box-sizing: border-box;
   border: none;
@@ -32,6 +36,7 @@
   height: 0.25em;
   background: #ccc;
 }
+
 [type="range"]::-ms-track {
   box-sizing: border-box;
   border: none;
@@ -39,6 +44,7 @@
   height: 0.25em;
   background: #ccc;
 }
+
 [type="range"]::-webkit-slider-thumb {
   margin-top: -0.625em;
   box-sizing: border-box;
@@ -48,6 +54,7 @@
   border-radius: 50%;
   background: #f90;
 }
+
 [type="range"]::-moz-range-thumb {
   box-sizing: border-box;
   border: none;
@@ -56,6 +63,7 @@
   border-radius: 50%;
   background: #f90;
 }
+
 [type="range"]::-ms-thumb {
   margin-top: 0;
   box-sizing: border-box;
@@ -65,12 +73,15 @@
   border-radius: 50%;
   background: #f90;
 }
+
 [type="range"]::-ms-tooltip {
   display: none;
 }
+
 [type="range"] ~ output {
   display: none;
 }
+
 .js [type="range"] ~ output {
   display: block;
   position: absolute;

app/Resources/styles/radioBtn.css

@@ -16,6 +16,7 @@
 
     & + label {
       @apply inline-flex items-center py-2 pl-8 pr-2 text-sm font-semibold rounded-lg cursor-pointer border-contrast bg-elevated border-3;
+
       color: hsl(var(--color-text-muted));
     }
   }

app/Resources/styles/readMore.css

@@ -6,12 +6,14 @@ Read more component (basic unstyled component)
 @layer components {
   .read-more {
     @apply flex flex-col items-start;
+
     /* You can update this variable directly in the html with the style attribute: style="--line-clamp: 3" */
     --line-clamp: 3;
   }
 
   .read-more__text {
     @apply overflow-hidden;
+
     display: -webkit-box;
     -webkit-line-clamp: var(--line-clamp);
     -webkit-box-orient: vertical;
@@ -19,6 +21,7 @@ Read more component (basic unstyled component)
 
   .read-more__checkbox {
     @apply absolute overflow-hidden whitespace-nowrap;
+
     clip: rect(0 0 0 0);
     clip-path: inset(100%);
     height: 1px;
@@ -48,6 +51,7 @@ Read more component (basic unstyled component)
 
   .read-more__checkbox:checked ~ .read-more__text {
     --line-clamp: none;
+
     -webkit-line-clamp: var(--line-clamp);
   }
 }

app/Resources/styles/seeMore.css

@@ -5,11 +5,13 @@
 
   .see-more__content {
     @apply relative overflow-hidden;
+
     height: var(--content-height);
   }
 
   .see-more_content-fade {
     @apply absolute bottom-0 left-0 w-full h-full pointer-events-none;
+
     background-image: linear-gradient(
       to bottom,
       transparent 70%,
@@ -19,6 +21,7 @@
 
   .see-more__checkbox {
     @apply absolute overflow-hidden whitespace-nowrap;
+
     clip: rect(0 0 0 0);
     clip-path: inset(100%);
     height: 1px;

app/Resources/styles/switch.css

@@ -16,6 +16,7 @@
 
     &:checked + .form-switch-slider::after {
       @apply transform translate-x-0 left-2;
+
       content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='m10 15.172 9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z'/%3E%3C/svg%3E%0A");
     }
 
@@ -40,6 +41,7 @@
 
       &::after {
         @apply translate-x-5;
+
         left: 0;
         top: -1px;
       }
@@ -47,6 +49,7 @@
 
     &::before {
       @apply absolute z-10 w-6 h-6 transition duration-200 rounded-full shadow bg-elevated ring-1 ring-black ring-opacity-5;
+
       content: "";
       left: 1px;
       bottom: 1px;

app/Views/Components/Charts/XYDuration.php

@@ -0,0 +1,10 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Views\Components\Charts;
+
+class XYDuration extends ChartsComponent
+{
+    protected string $type = 'xy-duration-chart';
+}

themes/cp_admin/podcast/analytics/listening_time.php

@@ -11,14 +11,14 @@
 <?= $this->section('content') ?>
 
 <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
-    <Charts.XY class="col-span-1" title="<?= lang('Charts.daily_listening_time') ?>" dataUrl="<?= route_to(
+    <Charts.XYDuration class="col-span-1" title="<?= lang('Charts.daily_listening_time') ?>" dataUrl="<?= route_to(
         'analytics-data',
         $podcast->id,
         'Podcast',
         'TotalListeningTimeByDay',
     ) ?>"/>
 
-    <Charts.XY class="col-span-1" title="<?= lang('Charts.monthly_listening_time') ?>" dataUrl="<?= route_to(
+    <Charts.XYDuration class="col-span-1" title="<?= lang('Charts.monthly_listening_time') ?>" dataUrl="<?= route_to(
         'analytics-data',
         $podcast->id,
         'Podcast',