ஜாவாஸ்கிரிப்ட் API ஐப் பயன்படுத்தி அட்டவணை அளவுருக்களுக்கான ஊடாடும் கீழ்தோன்றலை உருவாக்குதல்

அட்டவணை அளவுருக்களைக் கட்டுப்படுத்த ஒரு ஊடாடும் கீழ்தோன்றலை உருவாக்குதல்

அளவுருக்களை மாறும் வகையில் ஏற்ற மற்றும் புதுப்பிக்க, அட்டவணை உட்பொதித்தல் API உடன் JavaScript ஐப் பயன்படுத்துதல்

// Solution 1: Basic Implementation Using Async/Await and Tableau API
async function loadMoedaParameter() {
  try {
    const parameters = await viz.workbook.getParametersAsync();
    const moedaParam = parameters.find((p) => p.name === "Moeda");
    if (!moedaParam) {
      console.error("Parameter 'Moeda' not found!");
      return;
    }
    const dropdown = document.createElement("select");
    moedaParam.allowableValues.forEach((value) => {
      const option = document.createElement("option");
      option.text = value.formattedValue;
      option.value = value.value;
      dropdown.appendChild(option);
    });
    dropdown.value = moedaParam.currentValue.value;
    dropdown.addEventListener("change", async (e) => {
      const selectedMoeda = e.target.value;
      try {
        await viz.workbook.changeParameterValueAsync("Moeda", selectedMoeda);
        console.log("Moeda changed to:", selectedMoeda);
      } catch (error) {
        console.error("Error changing the Moeda parameter:", error);
      }
    });
    document.getElementById("Moeda-container-desktop").appendChild(dropdown);
  } catch (error) {
    console.error("Error loading the Moeda parameter:", error);
  }
}
viz.addEventListener(TableauEventType.FirstInteractive, loadMoedaParameter);

அட்டவணை அளவுரு புதுப்பிப்புகளுக்கான மாடுலர் டிராப் டவுன் லாஜிக்கை செயல்படுத்துகிறது

மாடுலர் செயல்பாடுகள் மற்றும் மேம்படுத்தப்பட்ட பிழை கையாளுதல் ஆகியவற்றைப் பயன்படுத்தி உகந்த அணுகுமுறை

// Solution 2: Modular and Reusable Code with Error Handling
function createDropdown(options, onChangeCallback) {
  const dropdown = document.createElement("select");
  dropdown.style.cssText = "border:none; width:100%; height:40px; background:#FFF;";
  options.forEach(({ text, value }) => {
    const option = document.createElement("option");
    option.text = text;
    option.value = value;
    dropdown.appendChild(option);
  });
  dropdown.addEventListener("change", (e) => onChangeCallback(e.target.value));
  return dropdown;
}

async function updateParameter(parameterName, value) {
  try {
    await viz.workbook.changeParameterValueAsync(parameterName, value);
    console.log(\`${parameterName} changed to: \${value}\`);
  } catch (error) {
    console.error("Error updating parameter:", error);
  }
}

async function loadParameterDropdown(containerId, parameterName) {
  try {
    const parameters = await viz.workbook.getParametersAsync();
    const param = parameters.find((p) => p.name === parameterName);
    if (!param) throw new Error(\`Parameter '\${parameterName}' not found!\`);
    const options = param.allowableValues.map((val) => ({
      text: val.formattedValue,
      value: val.value,
    }));
    const dropdown = createDropdown(options, (value) => {
      updateParameter(parameterName, value);
    });
    document.getElementById(containerId).appendChild(dropdown);
  } catch (error) {
    console.error("Error loading parameter dropdown:", error);
  }
}

viz.addEventListener(TableauEventType.FirstInteractive, () => {
  loadParameterDropdown("Moeda-container-desktop", "Moeda");
});

வெவ்வேறு சூழல்களில் அட்டவணை அளவுரு தொடர்புகளை சோதித்தல்

அளவுரு புதுப்பிப்புகளை சரிபார்க்க JavaScript மூலம் அலகு சோதனைகளை எழுதுதல்

// Solution 3: Unit Test to Validate Parameter Changes
function mockVizWorkbook() {
  return {
    parameters: [{
      name: "Moeda",
      allowableValues: [{ value: "USD", formattedValue: "USD" }],
      currentValue: { value: "USD" },
    }],
    changeParameterValueAsync: jest.fn().mockResolvedValue(),
  };
}

test("Dropdown updates Moeda parameter correctly", async () => {
  const vizMock = { workbook: mockVizWorkbook() };
  const updateSpy = vizMock.workbook.changeParameterValueAsync;
  document.body.innerHTML = '<div id="Moeda-container-desktop"></div>'; 

  await loadParameterDropdown("Moeda-container-desktop", "Moeda");
  const dropdown = document.querySelector("select");
  dropdown.value = "USD";
  dropdown.dispatchEvent(new Event("change"));

  expect(updateSpy).toHaveBeenCalledWith("Moeda", "USD");
});

அட்டவணை API இல் அளவுருக்களைப் பயன்படுத்துவது பற்றி அடிக்கடி கேட்கப்படும் கேள்விகள்

1. அட்டவணையில் உள்ள அளவுருவிற்கும் வடிகட்டிக்கும் என்ன வித்தியாசம்?
2. அளவுருக்கள் பயனர்கள் குறிப்பிட்ட மதிப்புகளை டாஷ்போர்டில் அனுப்ப அனுமதிக்கின்றன, அதே நேரத்தில் வடிப்பான்கள் அளவுகோல்களின் அடிப்படையில் காட்டப்படும் தரவைக் கட்டுப்படுத்துகின்றன. வடிகட்டிகள் தரவுத்தொகுப்புகளில் செயல்படுகின்றன, அதேசமயம் அளவுருக்கள் குறிப்பிட்ட புலங்கள் அல்லது கணக்கீடுகளைப் பாதிக்கின்றன.
3. அளவுருக்களைப் பெறும்போது எனது கீழ்தோன்றும் ஏன் காலியாக உள்ளது?
4. உறுதி செய்து கொள்ளுங்கள் getParametersAsync() செயல்பாடு வெற்றிகரமாக அளவுருவை மீட்டெடுக்கிறது. இல்லையெனில், பணிப்புத்தகக் கட்டுப்பாடுகள் காரணமாக அளவுரு மறைக்கப்படலாம் அல்லது அணுகப்படாமல் இருக்கலாம்.
5. அளவுருவின் தற்போதைய நிலைக்கு கீழ்தோன்றும் பொருந்துகிறது என்பதை எவ்வாறு உறுதி செய்வது?
6. பயன்படுத்தவும் currentValue.value கீழ்தோன்றலில் இயல்புநிலை விருப்பத்தை அமைக்க சொத்து. இது UI மற்றும் டாஷ்போர்டை சீரமைக்க வைக்கிறது.
7. அட்டவணையில் அளவுருக்களை புதுப்பிக்கும்போது பிழைகளை எவ்வாறு கையாள்வது?
8. மடக்கு changeParameterValueAsync() உள்ளே அழைக்கவும் a try-catch அளவுரு புதுப்பிக்கப்படும் போது ஏற்படும் பிழைகளைக் கையாள தடுக்கவும்.
9. தனிப்பயனாக்கத்திற்கு முன் டாஷ்போர்டு தயாராக இருப்பதை எந்த நிகழ்வு உறுதி செய்கிறது?
10. தி FirstInteractive டேப்லோ ஏபிஐயில் உள்ள நிகழ்வு, டாஷ்போர்டு முழுவதுமாக ஏற்றப்பட்டு, கீழ்தோன்றலைச் சேர்ப்பது போன்ற கூடுதல் தொடர்புகளுக்குத் தயாராக உள்ளது என்பதைக் குறிக்கிறது.

ஊடாடும் அளவுரு கையாளுதல் பற்றிய இறுதி எண்ணங்கள்

அளவுருவாக்கப்பட்ட டிராப் டவுன்களுடன் ஊடாடும் டாஷ்போர்டுகளை உட்பொதிப்பது பயனர்களுக்கு அதிக நெகிழ்வுத்தன்மையை வழங்குகிறது. சரியான அமைப்புடன், டெவலப்பர்கள் போன்ற அளவுருக்களைப் பெறலாம் மொய்டா மற்றும் டேஷ்போர்டு கட்டுப்பாட்டை மேம்படுத்த Tableau API ஐப் பயன்படுத்தவும். இந்த அமைப்பு பயனர்கள் தரவை மிகவும் திறம்பட ஆராய அனுமதிக்கிறது.

போன்ற முக்கிய கூறுகள் முதல் ஊடாடுதல் நிகழ்வு மற்றும் வலுவான பிழை கையாளுதல், கீழ்தோன்றும் மெனுக்கள் பயன்பாட்டிற்குள் சீராக செயல்படுவதை உறுதிசெய்க. இந்த அணுகுமுறையைப் பின்பற்றுவதன் மூலம், டெவலப்பர்கள் அளவுருக்களை திறமையாக நிர்வகிக்க முடியும் மற்றும் இறுதிப் பயனர்களுக்கு மாறும் மற்றும் பதிலளிக்கக்கூடிய டாஷ்போர்டு அனுபவத்தை வழங்க முடியும்.