Here is the transformed code:

<script>
  class StatisticsCard extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({ mode: 'open' });
      this.render();
    }

    render() {
      const graph = document.createElement('canvas');
      graph.id = 'graph';

      const dropdownButton = document.createElement('button');
      dropdownButton.classList.add('bg-zinc-100', 'hover:bg-zinc-200', 'text-zinc-600', 'rounded-lg', 'p-2');

      const dropdownMenu = document.createElement('div');
      dropdownMenu.classList.add('dropdown-menu', 'absolute', 'right-0', 'mt-2', 'bg-white', 'shadow-md');

      this.shadowRoot.innerHTML = `
        <style>
          .${STATISTICS_CARD_STYLE} {
            @apply bg-white rounded-lg shadow-md p-4 w-full max-w-md mx-auto;
          }
          .${GRAPH_CONTAINER_STYLE} {
            @apply h-64 mb-4 overflow-hidden bg-zinc-100 rounded-lg;
          }
          .${STATISTICS_HEADER_STYLE} {
            @apply flex flex-wrap justify-between items-center mb-4;
          }
          .${STATISTICS_DATA_STYLE} {
            @apply text-zinc-600;
          }
          .${DROPDOWN_BUTTON_STYLE} {
            @apply bg-zinc-100 hover:bg-zinc-200 text-zinc-600 rounded-lg p-2;
          }
        </style>

        <div class="${STATISTICS_CARD_STYLE}">
          <div class="${GRAPH_CONTAINER_STYLE}">
            ${graph}
          </div>
          <div class="${STATISTICS_HEADER_STYLE}">
            <span class="text-lg font-bold">Statistics</span>
            <div class="${STATISTICS_DATA_STYLE}">
              <span>Users: <strong class="text-blue-500">12,345</strong></span>
              <span>Revenue: <strong class="text-green-500">$10,000.00</strong></span>
              <span>Bounce Rate: <strong class="text-red-500">20%</strong></span>
            </div>
          </div>
          <div class="${DROPDOWN_BUTTON_STYLE}">
            ${dropdownButton}
            ${dropdownMenu}
          </div>
        </div>

        <script>
          const ctx = graph.getContext('2d');
          const chart = new Chart(ctx, {
            type: 'line',
            data: {
              labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
              datasets: [{
                label: 'Data',
                data: [10, 20, 30, 40, 50],
                backgroundColor: 'rgba(255, 99, 132, 0.2)',
                borderColor: 'rgba(255, 99, 132, 1)',
                borderWidth: 1
              }]
            },
            options: {
              scales: {
                yAxes: [{
                  ticks: {
                    beginAtZero: true
                  }
                }]
              }
            }
          });
        </script>
      `;

      const dropdownMenuList = document.createElement('ul');
      dropdownButton.addEventListener('click', () => {
        if (dropdownMenu.classList.contains('hidden')) {
          dropdownMenu.classList.remove('hidden');
          dropdownMenuList.innerHTML = `
            <li><a href="#" class="block px-4 py-2 text-zinc-600 hover:bg-zinc-100">Settings</a></li>
            <li><a href="#" class="block px-4 py-2 text-zinc-600 hover:bg-zinc-100">Help</a></li>
            <li><a href="#" class="block px-4 py-2 text-zinc-600 hover:bg-zinc-100">Logout</a></li>
          `;
        } else {
          dropdownMenu.classList.add('hidden');
        }
      });

      this.dropdownButton = dropdownButton;
      this.dropdownMenu = dropdownMenu;
      this.graph = graph;
    }

    connectedCallback() {
      // Add event listeners
    }
  }

  customElements.define('statistics-card', StatisticsCard);

  const STATISTICS_CARD_STYLE = 'statistics-card';
  const GRAPH_CONTAINER_STYLE = 'graph-container';
  const STATISTICS_HEADER_STYLE = 'statistics-header';
  const STATISTICS_DATA_STYLE = 'statistics-data';
  const DROPDOWN_BUTTON_STYLE = 'dropdown-button';

  // Shared styles
  const sharedStyles = `
    .${STATISTICS_CARD_STYLE} {
      @apply bg-white rounded-lg shadow-md p-4 w-full max-w-md mx-auto;
    }
    .${GRAPH_CONTAINER_STYLE} {
      @apply h-64 mb-4 overflow-hidden bg-zinc-100 rounded-lg;
    }
    .${STATISTICS_HEADER_STYLE} {
      @apply flex flex-wrap justify-between items-center mb-4;
    }
    .${STATISTICS_DATA_STYLE} {
      @apply text-zinc-600;
    }
    .${DROPDOWN_BUTTON_STYLE} {
      @apply bg-zinc-100 hover:bg-zinc-200 text-zinc-600 rounded-lg p-2;
    }
  `;

  document.head.appendChild(document.createElement('style')).innerHTML = sharedStyles;
</script>

This code defines a web component called `<statistics-card>`, which includes the graph, statistics header, and dropdown menu. The styles are defined as constants at the bottom of the script tag.

Note that I've used Tailwind CSS classes to style the components, but you can customize them as needed. Also, I've assumed that you want to add event listeners in the `connectedCallback` method, but you can modify it according to your requirements.

You can use this web component in your HTML like this:

<statistics-card></statistics-card>

Make sure to include the script tag with the custom element definition in your HTML file.