What's new in 3.5 #

Admindek 3.5 moves every chart in the template to Chart.js 4 (MIT) behind one shared theme preset, and changes the Google Maps page so the template no longer ships an API key. Layouts, markup conventions and the customizer are unchanged.

Charts: Chart.js 4 (MIT) #

ApexCharts moved to a proprietary licence, so 3.5 replaces it with Chart.js 4. ApexCharts is no longer installed, bundled or referenced anywhere in the template.

• One shared theme preset — src/assets/js/chart-theme.js, loaded right after chart.umd.min.js. It sets Chart.defaults from the template's CSS variables (Inter font, body and heading colours, subtle horizontal gridlines, no axis lines, rounded bars, circular legend and tooltip markers, dark tooltip) and exposes window.AdmindekChart with create(), radial(), sparkline(), gradient(), alpha(), color() and palette().
• Live theme switching — switching dark/light mode, RTL/LTR or the preset colour in the customizer repaints every chart already on the page. Legends and tooltips flip in RTL.
• Every chart recreated — all ten dashboards, the admin panel pages (Course, Membership, Helpdesk, Invoice dashboard and list), the AI Dashboard and AI Writer, the invoice summary, and the Chart and Statistics widget pages. Charts resize with their container (including the sidebar toggle) and inside tabs, modals and collapses.
• Charts → Chart.js showcase — chart/chart-chartjs.html keeps all 24 examples: bar, stacked, horizontal, pie, doughnut, radial, line, realtime, area with range buttons, mixed, candlestick, bubble, scatter with wheel/drag zoom (double-click to reset), heatmaps and radar. The old chart/chart-apex.html URL redirects there.
• Sparklines page — chart/chart-peity.html rebuilt with Chart.js.
• Removed the ApexCharts-specific styles from _general.scss, _style-dark.scss and _style-rtl.scss.

Chart plugins #

The showcase page adds three Chart.js plugins. All are MIT licensed and copied to assets/js/plugins/ by the build:

Porting your own charts #

On any page with charts, load Chart.js, then the preset, then your page script. This replaces the old ApexCharts script tag:

<script src="../assets/js/plugins/chart.umd.min.js"></script>
<script src="../assets/js/chart-theme.js"></script>
<script src="../assets/js/widgets/my-chart.js"></script>

Charts render into the same kind of <div id="..."> container as before. AdmindekChart.create() adds the canvas and takes a standard Chart.js config:

AdmindekChart.create(
  '#my-chart',
  {
    type: 'line',
    data: {
      labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
      datasets: [
        {
          label: 'Sales',
          data: [31, 40, 28, 51, 42],
          borderColor: () => AdmindekChart.color('primary'), // follows the preset colour
          backgroundColor: AdmindekChart.gradient('primary'),
          fill: true
        }
      ]
    }
  },
  { height: 300 }
);

The Chart Integration guide covers every helper, the built-in centerText and valueLabels plugins, live updates and the matrix, financial and zoom plugins.

Google Maps: static preview until you add your own key #

• The Google Maps page no longer ships an API key. Each example shows a static preview (an SVG drawn from public-domain Natural Earth coastlines) with a note on where to add a key.
• Add your key as googleMapsApiKey in src/assets/js/config.js (on an already-built site, edit assets/js/config.js). The Maps JavaScript API then loads and the previews become interactive maps: a basic map, and a marker with an info window (an advanced marker; set googleMapsMapId to your own Map ID).
• Removed the unused gmaps.min.js plugin and the keyless Maps Embed iframe that could not load.
• The vector maps (jsvectormap) need no key and are unchanged.

Step-by-step instructions, including how to restrict the key: Google Maps Key.

Bug fixes #

Found while rebuilding the charts:

• Chart.js showcase, area chart with 1M/6M/1Y/YTD/ALL buttons was empty because its data sat outside every button range. The series now ends inside the ranges, the page opens on 1Y as the markup marks, and 1M no longer points past the data.
• The same range buttons cleared .active on every button on the page; the reset is now scoped to the button group.
• Rounded heatmap: the ninth row was a duplicate "Metric8" (now "Metric9").
• Online Courses dashboard: the small "Sale" donuts in the Course States table were empty.
• Default dashboard, Revenue Trends: the lines were drawn at 10% opacity and were barely visible.

Also included since 3.4.1 #

3.5 includes the 3.4.2 and 3.4.3 patch releases. The changes most likely to affect your own code:

• Semantic colours fixed — danger is red again, success is green and warning is yellow. The customizer presets now use their own $preset-* variables, so all 10 presets look the same as before; only the contextual .btn-*, .bg-*, .text-*, .alert-* and .badge colours change.
• DataTables 3 with all extensions on their DataTables 3 releases. The $('#table').DataTable() demos work unchanged; if you built on the DataTables 2 API, read the DataTables 3 upgrade notes.
• Swiper 14 — no code changes in the template; check the minimum browser versions if you support older browsers.
• Filled Tabler icons (ti-*-filled) render correctly; a scoped tabler-icons-filled.min.css is generated during npm run build.
• Base paths fixed for pages in sub-folders: logos on auth and invoice pages, and language files on sub-pages.
• theme.js no longer throws on pages without the layout footer (the AI, e-commerce and application pages added in 3.4).

Upgrading from 3.4 #

# Pull the latest source
git pull
 
# Reinstall dependencies (chart.js and three Chart.js plugins were added)
rm -rf node_modules package-lock.json
npm install
 
# Start the dev server
npm run dev

Then port any custom chart code (see Porting your own charts) and, if you use Google Maps, add your key to src/assets/js/config.js.

Questions about the upgrade? Email contact@dashboardpack.com.