Shutdown banner (#2394)

CrowdDotDev · May 8, 2024 · 3b45221 · 3b45221
1 parent b5f17cb
commit 3b45221
Show file tree

Hide file tree

Showing 13 changed files with 119 additions and 19 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -42,7 +42,7 @@
     "chart.js": "^3.9.1",
     "chartjs-adapter-moment": "^1.0.1",
     "chartjs-plugin-annotation": "^2.2.1",
-    "chartkick": "github:CrowdDotDev/chartkick.js",
+    "chartkick": "^5.0.1",
     "element-plus": "^2.3.1",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-import": "^2.27.5",

diff --git a/frontend/src/modules/dashboard/dashboard.chart.js b/frontend/src/modules/dashboard/dashboard.chart.js
@@ -22,4 +22,6 @@ export const dashboardChartOptions = {
     ],
   },
   legendPlugin: false,
+  xMaxTicksLimit: 3,
+  xMaxRotation: 0,
 };
diff --git a/frontend/src/modules/layout/components/layout.vue b/frontend/src/modules/layout/components/layout.vue
@@ -6,7 +6,7 @@
         <!-- Revert to "showBanner" when last banner is removed -->
         <div
           :class="{
-            'pt-14': showBanner,
+            'pt-14': true,
           }"
         >
           <banner
@@ -140,6 +140,12 @@
               </router-link>
             </div>
           </banner>
+          <banner variant="danger">
+            <p class="text-sm text-center inline-flex w-full items-center justify-center flex-wrap">
+              <span>⚠️ <b>The crowd.dev SaaS will be shut down by 30 June 2024.</b>
+                We will be available to assist with any data migrations and other issues until that date.</span><span>Read more details in our <a href="https://www.crowd.dev/post/crowd-dev-acquired-by-the-linux-foundation" target="_blank" rel="noopener noreferrer">announcement</a>.</span>
+            </p>
+          </banner>
         </div>
         <router-view />
       </el-main>

diff --git a/frontend/src/modules/report/report-charts.js b/frontend/src/modules/report/report-charts.js
@@ -24,7 +24,6 @@ const formatTooltipOptions = {
     plugins: {
       tooltip: {
         callbacks: {
-
           label: (context) => (context.dataset.label ? pluralize(
             i18n(
               `widget.cubejs.tooltip.${context.dataset.label}`,
@@ -46,8 +45,25 @@ const platformColors = {
   devto: '#5EEAD4',
 };
 
+const timeXScale = {
+  scales: {
+    x: {
+      time: {
+        displayFormats: {
+          day: 'MMM DD, YYYY',
+          week: 'MMM DD, YYYY',
+          month: 'MMM DD, YYYY',
+          year: 'MMM DD, YYYY',
+        },
+        tooltipFormat: 'MMM DD, YYYY',
+      },
+    },
+  },
+};
+
 export function chartOptions(widget, resultSet) {
   let chartTypeOptions = {};
+
   const seriesNames = resultSet
     ? resultSet.seriesNames()
     : [];
@@ -56,6 +72,9 @@ export function chartOptions(widget, resultSet) {
   if (type === 'area' || type === 'line') {
     if (seriesNames.length <= 1) {
       chartTypeOptions = {
+        library: {
+          ...timeXScale,
+        },
         computeDataset: (canvas) => {
           const ctx = canvas.getContext('2d');
           const gradient = ctx.createLinearGradient(
@@ -71,11 +90,18 @@ export function chartOptions(widget, resultSet) {
       };
     } else {
       chartTypeOptions = {
+        library: {
+          ...timeXScale,
+        },
         computeDataset: () => ({ backgroundColor: 'transparent' }),
       };
     }
   } else if (type === 'bar') {
-    chartTypeOptions = {};
+    chartTypeOptions = {
+      library: {
+        ...timeXScale,
+      },
+    };
   } else if (type === 'pie' || type === 'donut') {
     chartTypeOptions = {
       donut: true,
@@ -85,6 +111,14 @@ export function chartOptions(widget, resultSet) {
         borderWidth: 0,
         cutout: '65%',
         plugins: {
+          tooltip: {
+            enabled: true,
+            callbacks: {
+              label(tooltipItem) {
+                return `${tooltipItem.label}: ${tooltipItem.formattedValue}`;
+              },
+            },
+          },
           legend: {
             display: true,
             position: 'right',
@@ -162,6 +196,7 @@ export function chartOptions(widget, resultSet) {
     ...options,
     library: {
       ...options.library,
+      ...timeXScale,
       plugins: {
         ...options.library.plugins,
         verticalHoverLine: false,

diff --git a/frontend/src/modules/report/templates/template-chart-config.js b/frontend/src/modules/report/templates/template-chart-config.js
@@ -26,9 +26,12 @@ const defaultChartOptions = (config) => ({
             month: 'MMM DD, YYYY',
             year: 'MMM DD, YYYY',
           },
+          tooltipFormat: 'MM/DD/YYYY',
         },
         ticks: {
           display: config.xTicks,
+          maxTicksLimit: config.xMaxTicksLimit,
+          maxRotation: config.xMaxRotation,
           color: '#9CA3AF',
           font: {
             family: 'Inter',

diff --git a/frontend/src/modules/widget/components/activity/widget-new-activities.vue b/frontend/src/modules/widget/components/activity/widget-new-activities.vue
@@ -98,6 +98,8 @@ const period = ref(
 );
 
 const widgetChartOptions = chartOptions('area', {
+  xMaxTicksLimit: 9,
+  xMaxRotation: 0,
   xTicksCallback: (value) => parseAxisLabel(value, granularity.value.value),
 });
 

diff --git a/frontend/src/modules/widget/components/activity/widget-total-activities.vue b/frontend/src/modules/widget/components/activity/widget-total-activities.vue
@@ -100,6 +100,8 @@ const period = ref(
 const granularity = computed(() => getTimeGranularityFromPeriod(period.value));
 
 const widgetChartOptions = chartOptions('area', {
+  xMaxTicksLimit: 5,
+  xMaxRotation: 0,
   legendPlugin: false,
   xTicksCallback: (value) => parseAxisLabel(value, granularity.value),
 });

diff --git a/frontend/src/modules/widget/components/member/widget-active-members.vue b/frontend/src/modules/widget/components/member/widget-active-members.vue
@@ -134,7 +134,11 @@ const drawerDate = ref();
 const drawerTitle = ref();
 
 const widgetChartOptions = chartOptions('area', {
-  xTicksCallback: (value) => parseAxisLabel(value, granularity.value.value),
+  xMaxTicksLimit: 9,
+  xMaxRotation: 0,
+  xTicksCallback: (
+    value,
+  ) => parseAxisLabel(value, granularity.value.value),
 });
 
 const { cubejsApi } = mapGetters('widget');

diff --git a/frontend/src/modules/widget/components/member/widget-total-members.vue b/frontend/src/modules/widget/components/member/widget-total-members.vue
@@ -130,7 +130,11 @@ const drawerTitle = ref();
 const granularity = computed(() => getTimeGranularityFromPeriod(period.value));
 const widgetChartOptions = chartOptions('area', {
   legendPlugin: false,
-  xTicksCallback: (value) => parseAxisLabel(value, granularity.value),
+  xMaxTicksLimit: 5,
+  xMaxRotation: 0,
+  xTicksCallback: (
+    value,
+  ) => parseAxisLabel(value, granularity.value),
 });
 
 const datasets = computed(() => [

diff --git a/...rc/modules/widget/components/product-community-fit/widget-monthly-active-contributors.vue b/...rc/modules/widget/components/product-community-fit/widget-monthly-active-contributors.vue
@@ -127,6 +127,8 @@ const widgetChartOptions = computed(() => chartOptions('area', {
   yType: yType.value,
   yMin: 0,
   yStepSize: 50,
+  xMaxTicksLimit: 8,
+  xMaxRotation: 0,
   yAfterBuildTicks: (axis) => {
     // Default ticks that need to be rendered regardless of axis type
     const ticks = [

diff --git a/frontend/src/modules/widget/components/widget.vue b/frontend/src/modules/widget/components/widget.vue
@@ -27,7 +27,7 @@
         <i class="ri-arrow-right-line ml-1" />
       </router-link>
     </div>
-    <div class="pt-4">
+    <div class="pt-6">
       <div
         v-if="loading"
         v-loading="loading"

diff --git a/frontend/src/shared/banner/banner.vue b/frontend/src/shared/banner/banner.vue
@@ -35,6 +35,10 @@ export default {
 .banner {
   @apply absolute h-14 inset-x-0 bg-gray-600 top-0 z-30 flex items-center px-6 text-white border-b;
 
+  &--danger {
+    @apply border-red-100 bg-red-50 text-black;
+  }
+
   &--alert {
     @apply border-yellow-100 bg-yellow-50 text-black;
   }