<commit_before>import * as React from 'react';
import useAsync from 'react-use/lib/useAsync';

import { LoadingSpinner } from '@waldur/core/LoadingSpinner';
import { translate } from '@waldur/i18n';

function loadChartjs() {
  return import(/* webpackChunkName: "chartjs" */ 'chart.js');
}

export const AllocationUsageChart = ({ chart }) => {
  const { loading, error, value: moduleValue } = useAsync(loadChartjs);

  const containerRef = React.useRef<any>();

  React.useEffect(() => {
    if (!moduleValue || !containerRef || !chart) {
      return;
    }
    const ctx = containerRef.current.getContext('2d');
    const options = {
      type: 'bar',
      data: chart,
      options: {
        responsive: true,
        tooltips: {
          mode: 'index',
          intersect: false,
        },
        legend: {
          display: false,
        },
        scales: {
          xAxes: [
            {
              stacked: true,
            },
          ],
          yAxes: [
            {
              stacked: true,
            },
          ],
        },
      },
    };
    new moduleValue.default.default(ctx, options);
  }, [moduleValue, containerRef, chart]);

  if (loading) {
    return <LoadingSpinner />;
  }

  if (error) {
    return <>{translate('Unable to load module')}</>;
  }

  if (moduleValue) {
    return (
      <div style={{ width: '100%' }}>
        <canvas ref={containerRef} />
      </div>
    );
  }
};<commit_msg>Fix deepscan issue.<commit_after>import * as React from 'react';
import useAsync from 'react-use/lib/useAsync';

import { LoadingSpinner } from '@waldur/core/LoadingSpinner';
import { translate } from '@waldur/i18n';

function loadChartjs() {
  return import(/* webpackChunkName: "chartjs" */ 'chart.js');
}

export const AllocationUsageChart = ({ chart }) => {
  const { loading, error, value: moduleValue } = useAsync(loadChartjs);

  const containerRef = React.useRef<any>();

  React.useEffect(() => {
    if (!moduleValue || !containerRef || !chart) {
      return;
    }
    const ctx = containerRef.current.getContext('2d');
    const options = {
      type: 'bar',
      data: chart,
      options: {
        responsive: true,
        tooltips: {
          mode: 'index',
          intersect: false,
        },
        legend: {
          display: false,
        },
        scales: {
          xAxes: [
            {
              stacked: true,
            },
          ],
          yAxes: [
            {
              stacked: true,
            },
          ],
        },
      },
    };
    new moduleValue.default(ctx, options);
  }, [moduleValue, containerRef, chart]);

  if (loading) {
    return <LoadingSpinner />;
  }

  if (error) {
    return <>{translate('Unable to load module')}</>;
  }

  return (
    <div style={{ width: '100%' }}>
      <canvas ref={containerRef} />
    </div>
  );
};
{'fraction_non_alphanumeric': 0.15019210618232623, 'fraction_numerical': 0.0041914076143905, 'mean_word_length': 1.949536560247168, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 21, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4881115', 'n_tokens_mistral': 885, 'n_tokens_neox': 866, 'n_words': 194}