const trafficData = [

  { name: 'zid.sa', organic: 481, paid: 0 },

  { name: 'salla.sa', organic: 2100, paid: 0 }

];

​

const keywordsData = [

  { name: 'zid.sa', keywords: 207 },

  { name: 'salla.sa', keywords: 8840 }

];

​

const backlinksData = [

  { name: 'zid.sa', backlinks: 1500 },

  { name: 'salla.sa', backlinks: 14100000 }

];

​

const referringDomainsData = [

  { name: 'zid.sa', domains: 284 },

  { name: 'salla.sa', domains: 12000 }

];

​

const displayAdsData = [

  { name: 'zid.sa', ads: 10 },

  { name: 'salla.sa', ads: 31 }

];

​

const brandedTrafficZid = [

  { name: 'Branded', value: 81.5 },

  { name: 'Non-Branded', value: 18.5 }

];

​

const brandedTrafficSalla = [

  { name: 'Branded', value: 19 },

  { name: 'Non-Branded', value: 81 }

];

​

const COLORS = ['#0088FE', '#00C49F'];

​

// Traffic Chart

let trafficSketch = function(p) {

  const WIDTH = 500;

  const HEIGHT = 300;

  const MARGIN = { top: 50, right: 30, bottom: 50, left: 60 };

  const CHART_WIDTH = WIDTH - MARGIN.left - MARGIN.right;

  const CHART_HEIGHT = HEIGHT - MARGIN.top - MARGIN.bottom;

  p.setup = function() {

    p.createCanvas(WIDTH, HEIGHT);

    p.textAlign(p.CENTER, p.CENTER);

    p.textSize(12);

  };

  p.draw = function() {

    p.background(255);

    // Draw axes

    p.stroke(0);

    p.line(MARGIN.left, HEIGHT - MARGIN.bottom, WIDTH - MARGIN.right, HEIGHT - MARGIN.bottom); // x-axis

    p.line(MARGIN.left, MARGIN.top, MARGIN.left, HEIGHT - MARGIN.bottom); // y-axis

    // Calculate bar width and spacing

    const barWidth = CHART_WIDTH / 3;

    const maxValue = Math.max(...trafficData.map(d => d.organic));

    const scale = CHART_HEIGHT / maxValue;

    // Draw bars

    for (let i = 0; i < trafficData.length; i++) {

      const x = MARGIN.left + (i + 0.5) * barWidth;

      const barHeight = trafficData[i].organic * scale;

      p.fill('#8884d8');

      p.rect(x, HEIGHT - MARGIN.bottom - barHeight, barWidth / 2, barHeight);

      // Label below bar

      p.fill(0);

      p.text(trafficData[i].name, x + barWidth / 4, HEIGHT - MARGIN.bottom + 20);

      // Value on top of bar

      p.text(trafficData[i].organic, x + barWidth / 4, HEIGHT - MARGIN.bottom - barHeight - 10);

    }

    // Y-axis labels

    p.textAlign(p.RIGHT, p.CENTER);

    for (let i = 0; i <= 5; i++) {

      const y = MARGIN.top + (CHART_HEIGHT / 5) * (5 - i);

      const value = Math.round((maxValue / 5) * i);

      p.text(value, MARGIN.left - 10, y);

      p.stroke(200);

      p.line(MARGIN.left, y, WIDTH - MARGIN.right, y);

    }

    p.noLoop(); // Only need to draw once

  };

};

​

// Keywords Chart

let keywordsSketch = function(p) {

  const WIDTH = 500;

  const HEIGHT = 300;

  const MARGIN = { top: 50, right: 30, bottom: 50, left: 60 };

  const CHART_WIDTH = WIDTH - MARGIN.left - MARGIN.right;

  const CHART_HEIGHT = HEIGHT - MARGIN.top - MARGIN.bottom;

  p.setup = function() {

    p.createCanvas(WIDTH, HEIGHT);

    p.textAlign(p.CENTER, p.CENTER);

    p.textSize(12);

  };

  p.draw = function() {

    p.background(255);

    // Draw axes

    p.stroke(0);

    p.line(MARGIN.left, HEIGHT - MARGIN.bottom, WIDTH - MARGIN.right, HEIGHT - MARGIN.bottom); // x-axis

    p.line(MARGIN.left, MARGIN.top, MARGIN.left, HEIGHT - MARGIN.bottom); // y-axis

    // Calculate bar width and spacing

    const barWidth = CHART_WIDTH / 3;

    const maxValue = Math.max(...keywordsData.map(d => d.keywords));

    const scale = CHART_HEIGHT / maxValue;

    // Draw bars

    for (let i = 0; i < keywordsData.length; i++) {

      const x = MARGIN.left + (i + 0.5) * barWidth;

      const barHeight = keywordsData[i].keywords * scale;

      p.fill('#82ca9d');

      p.rect(x, HEIGHT - MARGIN.bottom - barHeight, barWidth / 2, barHeight);

      // Label below bar

      p.fill(0);

      p.text(keywordsData[i].name, x + barWidth / 4, HEIGHT - MARGIN.bottom + 20);

      // Value on top of bar

      p.text(keywordsData[i].keywords, x + barWidth / 4, HEIGHT - MARGIN.bottom - barHeight - 10);

    }

    // Y-axis labels

    p.textAlign(p.RIGHT, p.CENTER);

    for (let i = 0; i <= 5; i++) {

      const y = MARGIN.top + (CHART_HEIGHT / 5) * (5 - i);

      const value = Math.round((maxValue / 5) * i);

      p.text(value, MARGIN.left - 10, y);

      p.stroke(200);

      p.line(MARGIN.left, y, WIDTH - MARGIN.right, y);

    }

    p.noLoop(); // Only need to draw once

  };

};

​

// Referring Domains Chart

let domainsSketch = function(p) {

  const WIDTH = 500;

  const HEIGHT = 300;

  const MARGIN = { top: 50, right: 30, bottom: 50, left: 60 };

  const CHART_WIDTH = WIDTH - MARGIN.left - MARGIN.right;

  const CHART_HEIGHT = HEIGHT - MARGIN.top - MARGIN.bottom;

  p.setup = function() {

    p.createCanvas(WIDTH, HEIGHT);

    p.textAlign(p.CENTER, p.CENTER);

    p.textSize(12);

  };

  p.draw = function() {

    p.background(255);

    // Draw axes

    p.stroke(0);

    p.line(MARGIN.left, HEIGHT - MARGIN.bottom, WIDTH - MARGIN.right, HEIGHT - MARGIN.bottom); // x-axis

    p.line(MARGIN.left, MARGIN.top, MARGIN.left, HEIGHT - MARGIN.bottom); // y-axis

    // Calculate bar width and spacing

    const barWidth = CHART_WIDTH / 3;

    const maxValue = Math.max(...referringDomainsData.map(d => d.domains));

    const scale = CHART_HEIGHT / maxValue;

    // Draw bars

    for (let i = 0; i < referringDomainsData.length; i++) {

      const x = MARGIN.left + (i + 0.5) * barWidth;

      const barHeight = referringDomainsData[i].domains * scale;

      p.fill('#ffc658');

      p.rect(x, HEIGHT - MARGIN.bottom - barHeight, barWidth / 2, barHeight);

      // Label below bar

      p.fill(0);

      p.text(referringDomainsData[i].name, x + barWidth / 4, HEIGHT - MARGIN.bottom + 20);

      // Value on top of bar

      const valueText = referringDomainsData[i].domains >= 1000 ? 

        (referringDomainsData[i].domains / 1000).toFixed(1) + 'K' : 

        referringDomainsData[i].domains;

      p.text(valueText, x + barWidth / 4, HEIGHT - MARGIN.bottom - barHeight - 10);

    }

    // Y-axis labels

    p.textAlign(p.RIGHT, p.CENTER);

    for (let i = 0; i <= 5; i++) {

      const y = MARGIN.top + (CHART_HEIGHT / 5) * (5 - i);

      const value = Math.round((maxValue / 5) * i);

      const valueText = value >= 1000 ? (value / 1000).toFixed(0) + 'K' : value;

      p.text(valueText, MARGIN.left - 10, y);

      p.stroke(200);

      p.line(MARGIN.left, y, WIDTH - MARGIN.right, y);

    }

    p.noLoop(); // Only need to draw once

  };

};

​

// Pie Charts for Traffic Distribution

let pieChartsSketch = function(p) {

  const WIDTH = 800;

  const HEIGHT = 300;

  p.setup = function() {

    p.createCanvas(WIDTH, HEIGHT);

    p.textAlign(p.CENTER, p.CENTER);

    p.textSize(12);

  };

  p.draw = function() {

    p.background(255);

    // Draw titles

    p.fill(0);

    p.textSize(16);

    p.text("zid.sa Traffic Distribution", WIDTH / 4, 30);

    p.text("salla.sa Traffic Distribution", 3 * WIDTH / 4, 30);

    p.textSize(12);

    // Draw zid.sa pie chart

    drawPieChart(p, WIDTH / 4, HEIGHT / 2, 100, brandedTrafficZid);

    // Draw salla.sa pie chart

    drawPieChart(p, 3 * WIDTH / 4, HEIGHT / 2, 100, brandedTrafficSalla);

    p.noLoop(); // Only need to draw once

  };

  function drawPieChart(p, x, y, radius, data) {

    let lastAngle = 0;

    let total = data.reduce((sum, item) => sum + item.value, 0);

    for (let i = 0; i < data.length; i++) {

      const sliceAngle = (data[i].value / total) * p.TWO_PI;

      p.fill(COLORS[i % COLORS.length]);

      p.stroke(255);

      p.arc(x, y, radius * 2, radius * 2, lastAngle, lastAngle + sliceAngle, p.PIE);

      // Draw label

      const labelAngle = lastAngle + sliceAngle / 2;

      const labelX = x + (radius + 30) * p.cos(labelAngle);

      const labelY = y + (radius + 30) * p.sin(labelAngle);

      p.fill(0);

      p.noStroke();

      p.text(`${data[i].name}: ${data[i].value}%`, labelX, labelY);

      lastAngle += sliceAngle;

    }

  }

};

​

// Initialize all sketches once the page loads

window.onload = function() {

  new p5(trafficSketch, 'trafficChart');

  new p5(keywordsSketch, 'keywordsChart');

  new p5(domainsSketch, 'domainsChart');

  new p5(pieChartsSketch, 'trafficDistributionCharts');

};