qlik-oss/sn-scatter-plot

export default function createStyleModel({ layoutService, themeService, flags }) {
  const styles = themeService.getStyles();

  const overrides = (key) => {
    const isEnabled = flags.isEnabled('CLIENT_IM_3050') || flags.isEnabled('CLIENT_IM_3051');
    return isEnabled ? layoutService.getLayoutValue('components', [])?.find((c) => c.key === key) : undefined;
  };

  const query = {
    referenceLine: {
      label: {
        getStyle: () => ({
          fill: styles.referenceLine.label.name.color,
          fontSize: styles.referenceLine.label.name.fontSize,
          fontFamily: styles.referenceLine.label.name.fontFamily,
        }),
      },
    },
    axis: {
      title: {
        getStyle: () => ({
          fontFamily: overrides('axis')?.axis?.title?.fontFamily ?? styles.axis.title.fontFamily,
          fontSize: overrides('axis')?.axis?.title?.fontSize ?? styles.axis.title.fontSize,
          color: overrides('axis')?.axis?.title?.color?.color ?? styles.axis.title.color,
        }),
      },
      label: {
        getStyle: () => ({
          fill: overrides('axis')?.axis?.label?.name?.color?.color ?? styles.axis.label.name.color,
          fontSize: overrides('axis')?.axis?.label?.name?.fontSize ?? styles.axis.label.name.fontSize,
          fontFamily: overrides('axis')?.axis?.label?.name?.fontFamily ?? styles.axis.label.name.fontFamily,
        }),
      },
    },
    label: {
      getStyle: () => ({
        fill: overrides('label')?.label?.value?.color?.color ?? styles.label.value.color,
        fontSize: overrides('label')?.label?.value?.fontSize ?? styles.label.value.fontSize,
        fontFamily: overrides('label')?.label?.value?.fontFamily ?? styles.label.value.fontFamily,
      }),
    },
    legend: {
      title: {
        getStyle: () => ({
          fontFamily: overrides('legend')?.legend?.title?.fontFamily ?? styles.legend.title.fontFamily,
          fontSize: overrides('legend')?.legend?.title?.fontSize ?? styles.legend.title.fontSize,
          color: overrides('legend')?.legend?.title?.color?.color ?? styles.legend.title.color,
        }),
      },
      label: {
        getStyle: () => ({
          fontFamily: overrides('legend')?.legend?.label?.fontFamily ?? styles.legend.label.fontFamily,
          fontSize: overrides('legend')?.legend?.label?.fontSize ?? styles.legend.label.fontSize,
          color: overrides('legend')?.legend?.label?.color?.color ?? styles.legend.label.color,
        }),
      },
    },
  };

  return { query };
}